Add feature flag to show page breadcrumbs in page topbar

What does this MR do and why?

Adds a new page_breadcrumbs_in_top_bar feature flag to show page breadcrumbs in page topbar (next to our 🦊 app logo) instead of the main panel header.

While this is a quite simple change for the majority of pages (see 1st commit), it needed some extra work for the "SPA-like" pages that use injectVueAppBreadcrumbs, see 2nd commit. Bulk of the changes are there!

The 3rd commit is only a little change, moving the "extra" button thing out of the breadcrumb wrapper, so that the wrapper can be removed from the DOM without also removing that "extra" element. See #591946 (comment 3170194055) for related discussion.

Still missing: There is still one Vue app still that ignores all of this: NewNamespaceApp which is used for /projects/new and /groups/new. This "SPA" did its own thing for breadcrumbs long time before injectVueAppBreadcrumbs was a thing, so it needs its own refactor. This can be done as a follow-up MR, behind the same feature flag.

References

Move breadcrumbs from panel heading to top bar (#591946)

Screenshots or screen recordings

This recording shows both "static" (SSR) breadcrumbs that don't change after a page has loaded ("Your work / Home", MRs, 99%) and an example of the "injected" breadcrumbs (CI/CD Catalog uses it):

This recording shows the responsive behavior. GlBreadcrumb autoshrink and autogrows But we might want to add some margin-right (or gap) between the breadcrumbs and the search field:

How to set up and validate locally

• Enable page_breadcrumbs_in_top_bar flag.
• Also test that nothing broke with flag disabled.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.