1907501 - input field in find bar no longer has a border on Windows

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P1)

Description

[Sören Hentzschel]

Since bug 1901888 the input field in the find bar (Ctrl + F) no longer has a border. Therefore, it's very difficult to see a difference between the input field and the toolbar itself. This could be considered as an a11y issue. The address has the same bad contrast since years, though. So maybe you won't consider it as an a11y problem.

I decided to file it as regression because bug 1901888 only mentions Linux, it is about a textarea and not an input field, and it doesn't mention any change for the find bar at all. So it's not clear if you're aware of that side effect.

Additional note: The border is missing on macOS as well, but already since Firefox 126. So for macOS there is a different cause (bug 1907503).

Comment 1

[Erik Nordin [:nordzilla]]

Dão may have more insight/opinion on this bug.

This has to do with --toolbar-field-border-color, which my browser is reporting as rgba(0, 0, 0, 0) on my Linux machine.

We made this change in D213339 based on this comment.

I'm not sure what the most-desirable fix would be here.

Comment 2

[Dão Gottwald [:dao]]

(In reply to Erik Nordin [:nordzilla] from comment #1)

Dão may have more insight/opinion on this bug.

This has to do with --toolbar-field-border-color, which my browser is reporting as rgba(0, 0, 0, 0) on my Linux machine.

We made this change in D213339 based on this comment.

I'm not sure what the most-desirable fix would be here.

How about we use var(--input-border-color) instead of var(--toolbar-field-border-color) in findbar.css?

Comment 3

[Erik Nordin [:nordzilla]]

Sounds good to me! Submitted a patch.

Comment 4

[Erik Nordin [:nordzilla]]

Attachment: Bug 1907501 - Restore visible border to findbar textbox r=dao

Changes the findbar textbox to use var(--input-border-color)
instead of var(--toolbar-field-border-color), the latter of
which does not seem to be visible in many themes.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Doesn't that feel wrong? If the point is that toolbar fields like the urlbar don't have a border, then this seems working as intended?

I guess we could special-case the findbar, but for themes that specify their own toolbar field colors it could look odd?

Comment 6

[Dão Gottwald [:dao]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #5)

Doesn't that feel wrong? If the point is that toolbar fields like the urlbar don't have a border, then this seems working as intended?

I guess we could special-case the findbar, but for themes that specify their own toolbar field colors it could look odd?

I'll forward this to UX, but I can see why we'd want to make only the address bar's border transparent as it's permanently visible and not just for entering stuff. With that in mind, --toolbar-field-border-color is perhaps named more generic than we really want it to be; at the time this was created, I believe it only applied to the address bar and search bar.

Comment 7

[Jules Simplicio [:jules]]

We should aim for at least 3:1 contrast ratio for accessibility purposes. The address bar in today's light and dark themes doesn't really have the best contrast either. I know UX will be working on tab contrast and beyond in the remaining of the year so I wouldn't recommend following the address bar as an example.

Using --input-border-color here makes sense to me.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/efb94d6efab9
Restore visible border to findbar textbox r=dao,desktop-theme-reviewers

Comment 9

[Iulian Moraru]

Backed out for causing bc failures on browser_ext_themes_findbar.js.

• Push with failures

• Failure log

• Backout link

[task 2024-07-24T14:26:11.049Z] 14:26:11     INFO - TEST-PASS | toolkit/components/extensions/test/browser/browser_ext_themes_findbar.js | Findbar textbox text color should be the same as toolbar field text color. - "rgb(148, 0, 255)" == "rgb(148, 0, 255)" - 
[task 2024-07-24T14:26:11.049Z] 14:26:11     INFO - Buffered messages finished
[task 2024-07-24T14:26:11.051Z] 14:26:11     INFO - TEST-UNEXPECTED-FAIL | toolkit/components/extensions/test/browser/browser_ext_themes_findbar.js | Element left border color should be set. - "color(srgb 0.580392 0 1 / 0.46)" == "rgb(255, 255, 255)" - 
[task 2024-07-24T14:26:11.051Z] 14:26:11     INFO - Stack trace:
[task 2024-07-24T14:26:11.052Z] 14:26:11     INFO - chrome://mochitests/content/browser/toolkit/components/extensions/test/browser/head.js:testBorderColor:88
[task 2024-07-24T14:26:11.052Z] 14:26:11     INFO - chrome://mochitests/content/browser/toolkit/components/extensions/test/browser/browser_ext_themes_findbar.js:test_support_toolbar_field_properties_on_findbar:119
[task 2024-07-24T14:26:11.052Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:handleTask:1145
[task 2024-07-24T14:26:11.052Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:_runTaskBasedTest:1217
[task 2024-07-24T14:26:11.052Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1358
[task 2024-07-24T14:26:11.052Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:1134
[task 2024-07-24T14:26:11.052Z] 14:26:11     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/<:1058
[task 2024-07-24T14:26:11.052Z] 14:26:11     INFO - Not taking screenshot here: see the one that was previously logged
[task 2024-07-24T14:26:11.055Z] 14:26:11     INFO - TEST-UNEXPECTED-FAIL | toolkit/components/extensions/test/browser/browser_ext_themes_findbar.js | Element right border color should be set. - "color(srgb 0.580392 0 1 / 0.46)" == "rgb(255, 255, 255)" - 
[task 2024-07-24T14:26:11.055Z] 14:26:11     INFO - Stack trace:
[task 2024-07-24T14:26:11.055Z] 14:26:11     INFO - chrome://mochitests/content/browser/toolkit/components/extensions/test/browser/head.js:testBorderColor:93
[task 2024-07-24T14:26:11.055Z] 14:26:11     INFO - chrome://mochitests/content/browser/toolkit/components/extensions/test/browser/browser_ext_themes_findbar.js:test_support_toolbar_field_properties_on_findbar:119
[task 2024-07-24T14:26:11.056Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:handleTask:1145
[task 2024-07-24T14:26:11.056Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:_runTaskBasedTest:1217
[task 2024-07-24T14:26:11.056Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1358
[task 2024-07-24T14:26:11.056Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:1134
[task 2024-07-24T14:26:11.056Z] 14:26:11     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/<:1058
[task 2024-07-24T14:26:11.057Z] 14:26:11     INFO - Not taking screenshot here: see the one that was previously logged
[task 2024-07-24T14:26:11.059Z] 14:26:11     INFO - TEST-UNEXPECTED-FAIL | toolkit/components/extensions/test/browser/browser_ext_themes_findbar.js | Element top border color should be set. - "color(srgb 0.580392 0 1 / 0.46)" == "rgb(255, 255, 255)" - 
[task 2024-07-24T14:26:11.060Z] 14:26:11     INFO - Stack trace:
[task 2024-07-24T14:26:11.060Z] 14:26:11     INFO - chrome://mochitests/content/browser/toolkit/components/extensions/test/browser/head.js:testBorderColor:98
[task 2024-07-24T14:26:11.060Z] 14:26:11     INFO - chrome://mochitests/content/browser/toolkit/components/extensions/test/browser/browser_ext_themes_findbar.js:test_support_toolbar_field_properties_on_findbar:119
[task 2024-07-24T14:26:11.060Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:handleTask:1145
[task 2024-07-24T14:26:11.060Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:_runTaskBasedTest:1217
[task 2024-07-24T14:26:11.060Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1358
[task 2024-07-24T14:26:11.060Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:1134
[task 2024-07-24T14:26:11.060Z] 14:26:11     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/<:1058
[task 2024-07-24T14:26:11.060Z] 14:26:11     INFO - Not taking screenshot here: see the one that was previously logged
[task 2024-07-24T14:26:11.062Z] 14:26:11     INFO - TEST-UNEXPECTED-FAIL | toolkit/components/extensions/test/browser/browser_ext_themes_findbar.js | Element bottom border color should be set. - "color(srgb 0.580392 0 1 / 0.46)" == "rgb(255, 255, 255)" - 
[task 2024-07-24T14:26:11.062Z] 14:26:11     INFO - Stack trace:
[task 2024-07-24T14:26:11.062Z] 14:26:11     INFO - chrome://mochitests/content/browser/toolkit/components/extensions/test/browser/head.js:testBorderColor:103
[task 2024-07-24T14:26:11.062Z] 14:26:11     INFO - chrome://mochitests/content/browser/toolkit/components/extensions/test/browser/browser_ext_themes_findbar.js:test_support_toolbar_field_properties_on_findbar:119
[task 2024-07-24T14:26:11.062Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:handleTask:1145
[task 2024-07-24T14:26:11.062Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:_runTaskBasedTest:1217
[task 2024-07-24T14:26:11.063Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1358
[task 2024-07-24T14:26:11.063Z] 14:26:11     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:1134
<...>

Comment 10

[Erik Nordin [:nordzilla]]

Oh wow.

I didn't run a try because I didn't expect a one-line CSS change of a border color to cause test failures.

I will look into this. Leaving my NI open for now.

Comment 11

[kanapa1]

If I may put my two cents in, the find-in-page search bar seems to have a lot in common with the search bar in the library (Ctrl + Shift + H), which in turn appears to draw heavily on the (slightly thicker) address bar in the main browser chrome.

To sum it up:

• All these three search bars are placed on an interface element that has the #F9F9FB background color.
• All three no longer have any border since bug 1901888 (which has its pros and cons, of course).
• HOWEVER, only 2 of them, i.e. the address bar and the search bar in the library, have the #F0F0F4 background color. The find-in-page search bar has a white (#FFFFFF) background instead, reducing the contrast ratio even further down to 1.05 : 1 (instead of 1.08 : 1 with #F0F0F4 as the search bar background, which is not great and accessible, but still better than the all-white alternative).

Perhaps the ultimate goal here would be to unify all these three search bars as much as possible, or at least just the two slim ones.

Comment 12

[kanapa1]

Attachment: Address_bar_library_find_in_page_search_bars_comparison_in_light_theme.png

Comment 13

[kanapa1]

Attachment: Comparison between the address bar, library search bar, and the find-in-page search bar in the built-in light theme

Comment 14

[Dão Gottwald [:dao]]

(In reply to Erik Nordin [:nordzilla] from comment #10)

Oh wow.

I didn't run a try because I didn't expect a one-line CSS change of a border color to cause test failures.

I will look into this. Leaving my NI open for now.

Can you just remove the border check? Themes can't control --input-border-color so there seems to be no point in testing that anymore.

Comment 15

[Erik Nordin [:nordzilla]]

(In reply to Dão Gottwald [:dao] from comment #14)

(In reply to Erik Nordin [:nordzilla] from comment #10)

Oh wow.

I didn't run a try because I didn't expect a one-line CSS change of a border color to cause test failures.

I will look into this. Leaving my NI open for now.

Can you just remove the border check? Themes can't control --input-border-color so there seems to be no point in testing that anymore.

Sorry Dão, I haven't had a moment to revisit this since it was backed out.

The underlying link to "the border check" is broken for me and just say, "Unable to find blame for revision":

https://searchfox.org/mozilla-central/rev/0dd776599d18cfc207a44dea24e8595f79a74755/toolkit/components/extensions/test/browser/browser_ext_themes_findbar.js#119

However, I can see from the URL that it looks like this line.

I will take a look at this when I have a moment!

Comment 17

[Dão Gottwald [:dao]]

Attachment: Bug 1907501 - Update browser_ext_themes_findbar.js

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b0a389c9cc56
Restore visible border to findbar textbox r=dao,desktop-theme-reviewers
https://hg.mozilla.org/integration/autoland/rev/fc7fca0d6324
Update browser_ext_themes_findbar.js r=nordzilla

Comment 19

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/b0a389c9cc56
https://hg.mozilla.org/mozilla-central/rev/fc7fca0d6324

Comment 20

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

The patch landed in nightly and beta is affected.
:nordzilla, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox129 to wontfix.

For more information, please visit BugBot documentation.

Comment 21

[Erik Nordin [:nordzilla]]

I don't necessarily think this needs to be uplifted with a11y severity S3

Comment 22

[Bianca Hidecuti, Desktop Test Engineering [:bhidecuti]]

I was able to reproduce the issue on an affected Nightly build from 2024-07-11, using Windows 11.
Verified as fixed on Firefox 130.0b5 using Windows 11, macOS 14.4 and Ubuntu 22.04. The find bar has a visible border.

Comment 24

[Alice0775 White]

[Tracking Requested - why for this release]: visual bug but one duplication bug.

If it's a trivial fix, I'd like to see it uplifted to 128esr.

Comment 25

[Erik Nordin [:nordzilla]]

Attachment: Bug 1907501 - Restore visible border to findbar textbox

Changes the findbar textbox to use var(--input-border-color)
instead of var(--toolbar-field-border-color), the latter of
which does not seem to be visible in many themes.

Original Revision: https://phabricator.services.mozilla.com/D216995

Comment 26

[Erik Nordin [:nordzilla]]

Attachment: Bug 1907501 - Update browser_ext_themes_findbar.js

Original Revision: https://phabricator.services.mozilla.com/D218068

Depends on D220166

Comment 27

[Erik Nordin [:nordzilla]]

I've rebased this patch onto esr128 and submitted the WIP patches.

My understanding is that the original patch needs to be in the release build before it can be uplifted to esr.

I'm leaving my NI open so that I can rebase after Release Day (Sept. 3) and officially request uplift.

Comment 28

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

A patch has been attached on this bug, which was already closed. Filing a separate bug will ensure better tracking. If this was not by mistake and further action is needed, please alert the appropriate party. (Or: if the patch doesn't change behavior -- e.g. landing a test case, or fixing a typo -- then feel free to disregard this message)

Comment 29

[Phabricator Automation]

esr128 Uplift Approval Request

• User impact if declined: The text-input area for the findbar when searching for text on a web page will not have a visible border in ESR 128
• Code covered by automated testing: no
• Fix verified in Nightly: yes
• Needs manual QE test: no
• Steps to reproduce for manual QE testing: Already verified
• Risk associated with taking this patch: Low Risk
• Explanation of risk level: These are visual-only CSS changes that regressed in 128 and were fixed in 130.
• String changes made/needed: None
• Is Android affected?: no

Comment 30

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-esr128/rev/19ef82de2223
https://hg.mozilla.org/releases/mozilla-esr128/rev/810460b1958c

Comment 31

[Bianca Hidecuti, Desktop Test Engineering [:bhidecuti]]

Verified as fixed on Firefox 128.3.0esr using Windows 11, macOS 14.4 and Ubuntu 22.04. The find bar has a visible border.