XWIKI-22342: A change in @navbar-height ruins vertical align of items in navbar

[Sereza7]

Jira URL

https://jira.xwiki.org/browse/XWIKI-22342

Changes

Description

• Finished updating the notification count display to allow for a more resilient styling.
• Removed the IE8 fix, we don't support it anymore and it messes with our other image styles to break the user avatar size when the navbar width is enough...
• Added logic for navbar items to fill up the height
• Centered properly the avatar with a flex display.

Clarifications

• Security: CSS is safe. No use of user input in the changes.
• Performance/sustainability: The JQuery lines are ran only once per page (if there's at least one notification). We removed a few lines of CSS but added a few more. It comes with a very small performance cost.
• Accessibility: The only change to the DOM is the addition of a non semantic element (explicitely defined as only for style).
• Backward Compatibility: The changes in CSS could break some customizations. However this is not something critical, and AFAIU, some customizations will just not receive the improvements, it should not regress the style. E.g. L88 of actions-menu.less assume some sort of content in the UIX. If the UIX doesn't follow one of the patterns found in XS, they won't get the full improvement. The Notification button DOM changes could break some customizations retrieving the number of notifications through the DOM. I think we can assume that's not many customizations and this is something we can update.
• Automated tests and quality in general (SonarQube checks): Checked sonarlint on NotificationsDisplayerUIX.xml, nothing to report.
• Localization: No addition or changes on existing translations.

Screenshots & Video

2025-01-16.14-38-02.mp4

In order to test multiple values quickly, instead of setting a defined height (like I'd advise for an actual use), I set the navbar height as a fraction of the screen (half). This way, redimensionning the screen allowed me to quickly change the value of the navbar height.

We can see that the navbar, with the changes proposed here the icons stay properly in the center. The only issue left is on very low width, the avatar seems to behave a bit weirdly.

Executed Tests

Manual tests, as seen above.
We can assume the changes in CSS don't break automated tests.
The test model for the updated notification count should not break because of the changes:

xwiki-platform/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-test/xwiki-platform-notifications-test-pageobjects/src/main/java/org/xwiki/platform/notifications/test/po/NotificationsTrayPage.java

Lines 66 to 67 in 5f90563

	@FindBy(css = "span.notifications-count")
	private WebElement countBadge;

In order to check this, I first built the change with mvn clean install -f xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-ui; mvn clean install -f xwiki-platform-distribution and then ran the mention tests mvn clean install -f xwiki-platform-core/xwiki-platform-mentions/xwiki-platform-mentions-test/xwiki-platform-mentions-test-docker -Pdocker. These tests use the Notification count (they count mention notifications). The build and tests passed successfully

Expected merging strategy

• Prefers squash: Yes
• Backport on branches:
  • 16.10.X (pretty safe changes)