Tab bar - Add suffix to hidden tab bar 'li' elements

[akhileshraju]

Signed-off-by: Akhilesh Raju [email protected]

Issue

Non unique ID values for <li> elements in the hidden and visible tab bar's on the left and right side.
Without this, when I try writing a playwright page model to click the tab bar button using the Playwright Locator, I get a "strict mode" error from Playwright which signifies that it got more than one element for given ID.
AFAIK, element ID's must be unique across the DOM.

https://community.theia-ide.org/t/dom-element-id-field-not-unique-for-tab-bar-entries/2563

What it does

Code changes to add a suffix -hidden to the <li> elements to ensure there is no ID clash.

Before the fix

After the fix

How to test

• Launch browser/electron app and inspect the elements in the hidden tab bar using the browser DevTools and notice the new -hidden suffix

Review checklist

• As an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• As a reviewer, I agree to behave in accordance with the review guidelines

[akhileshraju]

@msujew @vince-fugnitto if you can, would appreciate your review 🙂

[vince-fugnitto]

@akhileshraju thank you for your first contribution, I only have some minor comments 👍

[vince-fugnitto]

The changes work well for me 👍
@msujew do you mind reviewing as well?

[msujew]

The changes look reasonable to me and don't seem to cause any regressions. Looks good 👍 (after applying the comments by Vince of course)