1774262 - Make it easier to theme search-textbox

Status: RESOLVED FIXED

(Toolkit :: General, enhancement)

Description

[Mike Conley (:mconley) (:⚙️)]

We have a nice re-usable component for search inputs called search-textbox. One of the things that it has is a button / icon that appears in the field after some text has been inputted. That button can be used to quickly clear the field.

That icon can't currently be overridden. Bug 1534799 hard-coded that as an <img> with a src as part of a Fluent port, but this makes it difficult to override the icon with something else.

I'd like to increase the flexibility of this shared component by allowing that icon to be overridden.

Comment 1

[Mike Conley (:mconley) (:⚙️)]

So there are some layers to this. It looks like in bug 1698332, a patch was landed to make the clear search icon appear correctly on Android. This, however, broke the icon appearing on Desktop in certain contexts (like in about:preferences). That was filed as bug 1726341.

Then in bug 1534799, the solution we went with was to set a src attribute on an <img> tag, and that this allowed the load to go through. So far so good.

Now we come back to this bug. What I need to be able to do is to override the image with CSS, but I can't do that if the image is using the src attribute. So I've tried switching it to using list-style-image again, and now I'm re-hitting the CSP error.

So I suspect we might have to go at this a different way. Hey ckerschb, you wrote in bug 1726341 comment 10 that there's a carve-out exception for resource://pdf.js/. Is that this?: https://searchfox.org/mozilla-central/rev/170f06a720ddabee44c728b05ad30b18b066acca/dom/security/nsCSPService.cpp#82-84

would it make sense to add gre-resources there too? If so, is that the only spot, or are there other things I need to do?

Comment 2

[Christoph Kerschbaumer [:ckerschb]]

(In reply to Mike Conley (:mconley) (:⚙️) from comment #1)

Hey ckerschb, you wrote in bug 1726341 comment 10 that there's a carve-out exception for resource://pdf.js/. Is that this?: https://searchfox.org/mozilla-central/rev/170f06a720ddabee44c728b05ad30b18b066acca/dom/security/nsCSPService.cpp#82-84

would it make sense to add gre-resources there too? If so, is that the only spot, or are there other things I need to do?

Yes, it makes sense to add gre-resources as well, maybe we can create some allow-list array kind of structure to make this more readable?

As far as I know there are two parts to this:

• subjectToCSP, and also
• permits

Comment 3

[Mike Conley (:mconley) (:⚙️)]

Attachment: Bug 1774262 - Make search-textbox component easier to theme. r?mstriemer!,ckerschb!

This allows consumers of the component to override the clear search icon
and change the width of the focus outline.

Comment 4

[Mike Conley (:mconley) (:⚙️)]

It turns out there's an existing mechanism to declare inside of moz.build files when a file should be content accessible in the gre folder introduced in bug 863246 - I need to add the file to a CONTENT_ACCESSIBLE_FILES in the moz.build.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/cfa4f2bc03ab
Make search-textbox component easier to theme. r=mstriemer,desktop-theme-reviewers,dao,freddyb

Comment 6

[Sandor Molnar[:smolnar]]

Backed out changeset cfa4f2bc03ab (bug 1774262) for causing build bustages in searchfield-cancel.svg

Backout link: https://hg.mozilla.org/integration/autoland/rev/17a5e457676d376bd61a45eb9b42bb60106a47bf

Push with failures

Failure log

INFO -  package> ERROR: The following duplicated files are not allowed:
[task 2022-06-30T18:02:09.179Z] 18:02:09     INFO -  package> chrome/toolkit/res/searchfield-cancel.svg
[task 2022-06-30T18:02:09.179Z] 18:02:09     INFO -  package> contentaccessible/searchfield-cancel.svg
[task 2022-06-30T18:02:09.180Z] 18:02:09    ERROR -  package> gmake[5]: *** [/builds/worker/checkouts/gecko/toolkit/mozapps/installer/packager.mk:26: stage-package] Error 1

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7451166dbe99
Make search-textbox component easier to theme. r=mstriemer,desktop-theme-reviewers,dao,freddyb

Comment 8

[Cosmin Sabou [:CosminS]]

Backed out for causing a11y failures on test_txtctrl.xhtml.

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=7451166dbe99322f02e3f91067f6ae421d8db33c&searchStr=a11y&selectedTaskRun=W8ytvbsFT2m-sFUpVmU1HQ.0

Failure log: https://treeherder.mozilla.org/logviewer?job_id=383054548&repo=autoland

Backout link: https://hg.mozilla.org/integration/autoland/rev/894c4a8fca8e7ad4486d06fb3ab782622129f3f4

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f1294cf39d6e
Make search-textbox component easier to theme. r=mstriemer,desktop-theme-reviewers,dao,freddyb

Comment 10

[Sandor Molnar[:smolnar]]

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