fix(ui-mode): Watch mode button doesn't show active when test selected

[GeneratorX16]

description: The watch mode button was not showing as highlighted when a test in the tree view was focused and the watch icon was being clicked. Handled this issue for both, light mode and dark mode visibility.
#34434
Light Mode (Selected/Focused):

Dark Mode (Selected/Focused):

[agg23]

Thank you for the PR. While this is an improvement, this does not pass contrast accessibility, so it technically has not fixed the problem.

Instead of attempting to find a color that works, the correct solution is to draw a box around the active watch icon and keep the watch icon as always white. This isn't the best example screenshot, but you can see how the button is handled.

[GeneratorX16]

I have updated the selected icon with the following way:
Dark Mode Hilighted and Selected:

Dark Mode Highlighted but not selected:

Light Mode Highlighted and Selected:

Light Mode Highlighted but not selected:

[github-actions]

Test results for "tests 1"

18 failed
❌ [webkit-library] › tests/library/browsertype-connect.spec.ts:173:5 › run-server › should ignore page.pause when headed @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:24:3 › should have default url when launching browser @smoke @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:30:3 › should close browser with beforeunload page @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:42:3 › should close browsercontext with pending beforeunload dialog @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:56:3 › should not crash when creating second context @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:69:3 › should click when viewport size is larger than screen @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:84:3 › should dispatch click events to oversized viewports @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:108:3 › should click background tab @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:114:3 › should close browser after context menu was triggered @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:122:3 › should(not) block third party cookies @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:158:3 › should not block third party SameSite=None cookies @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:195:3 › should not override viewport size when passed null @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:213:3 › Page.bringToFront should work @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:233:3 › should click in OOPIF @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:252:3 › should click bottom row w/ infobar in OOPIF @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:287:3 › headless and headful should use same default fonts @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/headful.spec.ts:317:3 › should have the same hyphen rendering on headless and headed @webkit-ubuntu-22.04-node18
❌ [webkit-library] › tests/library/inspector/title.spec.ts:35:5 › should update primary page URL when original primary closes @webkit-ubuntu-22.04-node18

22 flaky

⚠️ [chromium-library] › tests/library/role-utils.spec.ts:442:5 › svg role=presentation @chromium-ubuntu-22.04-node18
⚠️ [chromium-library] › tests/library/role-utils.spec.ts:442:5 › svg role=presentation @chromium-ubuntu-22.04-node20
⚠️ [chromium-library] › tests/library/role-utils.spec.ts:442:5 › svg role=presentation @chromium-ubuntu-22.04-node22
⚠️ [firefox-page] › tests/page/page-evaluate.spec.ts:403:3 › should throw for too deep reference chain @firefox-ubuntu-22.04-node18
⚠️ [firefox-page] › tests/page/page-event-request.spec.ts:182:3 › should return response body when Cross-Origin-Opener-Policy is set @firefox-ubuntu-22.04-node18
⚠️ [playwright-test] › tests/ui-mode-trace.spec.ts:341:5 › should work behind reverse proxy @ubuntu-latest-node22-1
⚠️ [webkit-library] › tests/library/browsercontext-clearcookies.spec.ts:72:3 › should remove cookies by name regex @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/inspector/cli-codegen-1.spec.ts:349:7 › cli codegen › should fill textarea with new lines at the end @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/selector-generator.spec.ts:39:5 › selector generator › should prefer button over inner span @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/selector-generator.spec.ts:81:5 › selector generator › should try to improve role name @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/selector-generator.spec.ts:321:7 › selector generator › should prioritize attributes correctly › placeholder @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/selector-generator.spec.ts:398:5 › selector generator › should use the name attributes for elements that can have it @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/selector-generator.spec.ts:492:5 › selector generator › should generate title selector @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/selector-generator.spec.ts:578:5 › selector generator › should generate multiple: noId @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/trace-viewer.spec.ts:90:1 › should show empty trace viewer @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/trace-viewer.spec.ts:293:1 › should show params and return value @webkit-ubuntu-22.04-node18
⚠️ [webkit-page] › tests/page/page-leaks.spec.ts:82:5 › click should not leak @webkit-ubuntu-22.04-node18
⚠️ [webkit-page] › tests/page/page-leaks.spec.ts:107:5 › fill should not leak @webkit-ubuntu-22.04-node18
⚠️ [webkit-page] › tests/page/page-leaks.spec.ts:161:5 › waitFor should not leak @webkit-ubuntu-22.04-node18
⚠️ [webkit-page] › tests/page/page-screenshot.spec.ts:345:5 › page screenshot › should work while navigating @webkit-ubuntu-22.04-node18
⚠️ [webkit-page] › tests/page/page-set-input-files.spec.ts:205:3 › should upload multiple large files @webkit-ubuntu-22.04-node18
⚠️ [playwright-test] › tests/ui-mode-test-watch.spec.ts:145:5 › should watch all @windows-latest-node18-1

37801 passed, 653 skipped
✔️✔️✔️

Merge workflow run.