Bug 1870891 - Replace native <select> with custom element with search bar

[kyoshino]

Bug 1870891 - Replace native <select> with custom element with search bar

This PR replaces most of the native <select> elements on the enter_bug and show_bug pages with new custom elements. A search bar appears when there are 10 or more options for easier filtering. The component dropdown displays the component description in a popover.

Implementation note: These dropdown lists and popovers are created using <dialog> (modal top layer) instead of the Popover API (non-modal top layer) because the latter is not yet enabled in Firefox other than Nightly. It’s not a problem but just in case some wonder.

[kyoshino]

Hmm, all the Selenium tests failed. I assume the headless Firefox instance is too old to support some features:

• <dialog> shipped with Firefox 98 in March 2022
• ElementInternals shipped with Firefox 93 in October 2021

selenium/standalone-firefox:3.141.59 was released in September 2021.

[kyoshino]

Tests are still failing, of course — because I have replaced <select> and <option> with <bz-select> and <bz-option>. I’m updating relevant XPaths in the tests accordingly.

[kyoshino]

All tests passed 🟢

[dklawren]

Is this ready for review? I can start looking at it right away if so.

[kyoshino]

Is this ready for review? I can start looking at it right away if so.

Yes!

[dklawren]

Mostly everything checks out and looks great! I did see one issue that will need to be resolved. When changing the product on a current bug (show_bug.cgi) the component, version and milestone fields need to be highlighted the same way the current bug page does. This is not happening with the new select. For example:

I have installed your latest changes on bugzilla-dev.allizom.org if you want to see it in action with a large list of components, etc.

[kyoshino]

Thanks @dklawren! I’ve added the fix for field highlights.