1753582 - URL bar height should scale with OS text size (e.g. when changed through Gnome Tweaks)

Status: RESOLVED FIXED

(Firefox :: Address Bar, defect, P3)

Description

[Lars T Hansen [:lth]]

Attachment: bad_scaling.png

(Firefox Nightly 98, Fedora 38)

If I tweak the default font sizes in Gnome Tweaks, then the text in non-content panes in Firefox is scaled appropriately, as are many other widgets, eg most favicons in Tree Style Tabs. But the URL bar and the favicons for pinned tabs are not scaled, so at sufficiently large text sizes the URL bar has too little vertical space and cannot properly display the scaled text that is in it, and the pinned tab favicons are close to illegible.

Comment 1

[Morgan Reschenberg [:morgan]]

Not sure if this is a toolkit bug, persay, but it should live in the component that deals with the chrome toolbar.
Added access tracking and access severity.

Comment 2

[:Gijs (he/him)]

This will probably need splitting off into individual bugs.

I think not scaling favicons with text size is intentional - they are not text, and you're not using full zoom (DPI / window.devicePixelRatio) scaling, you're just changing minimum font sizes. That combined with the fact they'll look ugly when scaled by a factor of, say, 1.16, and given that we don't know what counts as the "base" or "normal" font size on Linux, means I'm not sure we can do much without ruining their appearance there completely.

The URL bar, on the other hand, probably should scale vertically when text size increases. I'll morph this for the URL bar. If you think my judgment of the favicon issue is wrong, I'd suggest filing a separate bug in Firefox :: Tabbed Browser with more details. Ditto if there are other components where you're noticing issues.

Comment 3

[Lars T Hansen [:lth]]

Thanks. The funny thing about the favicons is that they are scaled with the text size in extensions -- I'll attach a screenshot. But I don't know if I'm going to make more of a fuss about it. (I got a new high-DPI monitor and was trying to prevent my increasingly old eyes from bleeding while I was using it, hence a bunch of experiments with default zoom, text sizes, etc.)

Comment 4

[Lars T Hansen [:lth]]

Attachment: favicons.png

Comment 5

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

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

For more information, please visit auto_nag documentation.

Comment 6

[Drew Willcoxon :adw]

Also happens with Windows 10's "Make text bigger" slider in the Display preferences.

Comment 7

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

The severity field for this bug is set to S3. However, the accessibility severity is higher, [access-s2].
:adw, could you consider increasing the severity?

For more information, please visit auto_nag documentation.

Comment 8

[Drew Willcoxon :adw]

Adding blocked-ux because it seems like there are some (maybe minor) UX/UI questions here.

Comment 9

[Drew Willcoxon :adw]

Let's reduce the severity to S3. We don't know how many people this affects but the URL text is still largely legible in these cases.

Comment 10

[Marco Bonardo [:mak]]

Attachment: sshot.png

I was testing on Win10, and for me the option to just increase text size seems to make the UI behave appropriately.

Comment 11

[Dão Gottwald [:dao]]

(In reply to Marco Bonardo [:mak] from comment #10)

Created attachment 9285152 [details]
sshot.png

I was testing on Win10, and for me the option to just increase text size seems to make the UI behave appropriately.

Microsoft somewhat recently changed this so that increasing the text size is just another way of DPI scaling. That said, considering Microsoft's history with these sort of settings, there might still be a setting hidden somewhere to get the old behavior. This is Firefox treating the Windows setting this way as of bug 1773342.

Where the OS doesn't support text scaling, you can emulate this manually e.g. this way:

diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
--- a/browser/themes/shared/urlbar-searchbar.css
+++ b/browser/themes/shared/urlbar-searchbar.css
@@ -16,16 +16,17 @@
   :root {
     --toolbar-field-border-color: transparent;
     --toolbar-field-focus-border-color: color-mix(in srgb, var(--focus-outline-color) 50%, transparent);
   }
 }
 
 #urlbar-container,
 #search-container {
+  font-size: 1.6em;
   padding-block: 4px;
   margin-inline: var(--urlbar-margin-inline);
 }
 
 #search-container[cui-areatype="panel"] {
   margin: var(--arrowpanel-menuitem-margin);
 }

Comment 12

[Dão Gottwald [:dao]]

Attachment: Bug 1753582 - Let the urlbar min-height grow with the font size. r=mak

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e0584a3d2dae
Let the urlbar min-height grow with the font size. r=mak

Comment 14

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/e0584a3d2dae