Naming the dialog-y panel-y pop-up-y things in code

[eemeli]

As identified in https://github.com/mozilla/pontoon/pull/2513#discussion_r867823082, the codebase needs a generic name for UI boxes that are (usually) opened by clicking on a thing. Ideas floated so far include "popup", "panel", and "dialog".

[keunes]

'modal'?

[flodolo]

A modal is a dialog which requires interaction and blocks the user, which is not the case here (if I understand correctly).

• Pop-up gives the idea of something that opens in a completely different place.
• Drop-down feels like something the user should be interacting with, in a non-blocking way (unlike a modal). Is the latter always the case? For example, it would be apt for filters or notifications.
• If the user can't interact with it, then panel would be my choice.

[eemeli]

Some examples of the things this is talking about:

• resource selector
• project completion
• project info
• notifications
• hamburger menu
• search filters
• message settings
• keyboard shortcuts

That's probably not an exhaustive list, but it does include stuff that is very drop-down-menu-like, and stuff that's purely informative, and things in between with various levels of interaction.

All of those share some characteristics though:

• A button-like element exists in the normal UI flow for the thing.
• Interacting (e.g. clicking) on that element opens a box outside the normal UI flow in the vicinity of the trigger element.
• The box may be dismissed by interacting with other page elements or by pressing the Esc key.

While we could split this list into two or three categories and call them different things in the code, that feels a bit artificial to me. Hence when needing to use some term, I initially defaulted to "dialog" as it seemed sufficiently inclusive and not misleading. Something like "popup" could work as well, but I'd prefer to avoid "panel", as that sounds like it would be a part of the normal UI flow.