1956650 - [META] Remove custom "clear search" buttons in the DevTools and use ::-moz-search-clear-button instead

Status: NEW

(DevTools :: General, task, P2)

Description

[Tim Giles [:tgiles]]

In order to enable the "clear search" button in search inputs in privileged documents, we need to remove the existing "clear search" buttons that were implemented as stop-gaps. Otherwise there will be duplicate "clear search" buttons.

There appear to be three of these buttons in the inspector:

• inspector-searchinput-clear
• ruleview-searchinput-clear
• computed-searchinput-clear

This work will have to be done in conjunction with enabling the "clear search" button for chrome documents, so we should probably stack all the related patches to make sure we don't end up in an odd state if something gets backed out.

Comment 1

[Julian Descottes [:jdescottes]]

As discussed on slack, also spotted clear buttons in console & netmonitor, will need to review the rest of our UI.

Comment 2

[Julian Descottes [:jdescottes]]

Tim, some questions from triage:

• it seems we cannot tab to the button (keyboard navigation), is this planned to be keyboard accessible?
• can we style it via a pseudo element, eg to change the color?
• can we add a title (we have one usually for our clear buttons) ?

Also what's the timeline for this change, any deadline?

On our side:

• need to check if code (event listeners) need to be updated.
• need to update other filter-like inputs (eg Style Editor search) to use a search type field as well, for consistency.

Comment 3

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Just a quick note: the new "Clear Search" button is currently behind the layout.forms.input-type-search.enabled preference.

Comment 4

[Tim Giles [:tgiles]]

(In reply to Julian Descottes [:jdescottes] from comment #2)

Tim, some questions from triage:

• it seems we cannot tab to the button (keyboard navigation), is this planned to be keyboard accessible?

This is expected behavior and requested from accessibility, see Comment #1 on Bug 1936648 for more details

• can we style it via a pseudo element, eg to change the color?

Yeah, you will be able to use fill to change the color of this element via the ::-moz-search-clear-button pseudo element. I tested this with adding .devtools-searchinput::-moz-search-clear-button { fill: red; } in the common.css and it changed just the clear icon red.

• can we add a title (we have one usually for our clear buttons) ?

Currently this is not possible due to the clear search button inheriting text that could result in a confusing user experience. The example I talk about in the patch preventing inheriting the title attribute is where the search bar from the Customizable UI would display "Search using <search engine>" from the text input, even though clicking this button would clear the search input and not actually search using that particular search engine. Maybe this is something that can be visited again later on, but I currently have no plans to allow the title attribute to be set on the clear search button.

Also what's the timeline for this change, any deadline?

The change that enables the clear search buttons in chrome documents will land very early in Nightly 141 (hopefully May 26). This gives us an entire cycle to catch visual regressions related to the search input in our UI (and if necessary, back out the enabling patch and the subsequent fixes). This work is required for the Settings Redesign project that the Design Systems (Acorn) Engineering team is working on, and is something I would want to enable before the first half of this year is over. If I had to give a hard deadline, would probably be the end of June for getting the clear search button enabled change (and the visual regression fixes) landed.

Feel free to needinfo me if there are further questions. Thank yall for taking the time to look at this!

Comment 5

[Julian Descottes [:jdescottes]]

Thanks for the updates Tim, given that it will be enabled soon-ish, we will probably hide the extra buttons with CSS until we have time to migrate all our inputs.

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Julian Descottes [:jdescottes] from comment #5)

Thanks for the updates Tim, given that it will be enabled soon-ish, we will probably hide the extra buttons with CSS until we have time to migrate all our inputs.

Let's do that in Bug 1968252.
I'm also turning this bug into a META and filing individual bug for all the search input we have so we can gradually move to the new one