feat: overhaul of overlay UI

[negimox]

• This is a bugfix
• This is a feature
• This is a code refactor
• This is a test update
• This is a docs update
• This is a metadata update

For Bugs and Features; did you add new tests?

No ( Already exists )

Motivation / Use-Case

Modified and improved the overlay UI according to #3689

Breaking Changes

Additional Info

webpack_dev_feat_overlay-2025-03-23_03.09.36.mp4

[negimox]

Hello, @alexander-akait @snitin315 can you check if this change suits issue #3689 ?

[codecov]

Codecov Report

Attention: Patch coverage is 8.38323% with 153 lines in your changes missing coverage. Please review.

Project coverage is 58.11%. Comparing base (af6bd68) to head (9a9305e).
Report is 120 commits behind head on master.

Files with missing lines	Patch %	Lines
client-src/overlay.js	8.38%	134 Missing and 19 partials ⚠️

❗ There is a different number of reports uploaded between BASE (af6bd68) and HEAD (9a9305e). Click for more details.

HEAD has 26 uploads less than BASE

Flag	BASE (af6bd68)	HEAD (9a9305e)
	36	10

Additional details and impacted files

@@             Coverage Diff             @@
##           master    #5441       +/-   ##
===========================================
- Coverage   90.29%   58.11%   -32.19%     
===========================================
  Files          15       13        -2     
  Lines        1577     2139      +562     
  Branches      601      768      +167     
===========================================
- Hits         1424     1243      -181     
- Misses        140      748      +608     
- Partials       13      148      +135     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[alexander-akait]

Let's add a test cases.

You remove:

containerElement.innerHTML = overlayTrustedTypesPolicy
        ? overlayTrustedTypesPolicy.createHTML("")
        : "";

But in some part of code you use something.innerHTML= "html", you need to use the same logic as you remove, otherwise trusted police will be broken

Also does it work for warnings too?

[alexander-akait]

Anyway code looks good, let's fix the problems above

[negimox]

Hello, @alexander-akait. I have modified the code according to the above suggestions. can you verify if it is sufficient?

[alexander-akait]

Let's add the same test but with TrustedTypesPolicy to ensure we don't break something and we can merge, thank you for your work