Windows support for Malicious website protection

[mgurgel]

Asana Task/Github Issue: https://app.asana.com/0/72649045549333/1208745889841029/f

Description

• Malicious site Special Error page for Windows
• Screenshot tests for Special Error pages

Previews:

• Phishing
• Malware

Figma

Testing Steps

• In the web preview, check that all styles match Figma, including when Advanced button is clicked
• In native build, check that all buttons work

Checklist

Please tick all that apply:

• I have tested this change locally
• I have tested this change locally in all supported browsers
• This change will be visible to users
• I have added automated tests that cover this change
• I have ensured the change is gated by config
• This change was covered by a ship review
• This change was covered by a tech design
• Any dependent config has been merged

[netlify]

✅ Deploy Preview for content-scope-scripts ready!

Name	Link
🔨 Latest commit	b21efeb
🔍 Latest deploy log	https://app.netlify.com/sites/content-scope-scripts/deploys/67b23652d667a300081dcc1f
😎 Deploy Preview	https://deploy-preview-1423--content-scope-scripts.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Temporary Branch Update

The temporary branch has been updated with the latest changes. Below are the details:

• Branch Name: pr-releases/pr-1423
• Commit Hash: cfffa6555ace8bca20688376490ba7d1dceee1e9
• Install Command: npm i github:duckduckgo/content-scope-scripts#cfffa6555ace8bca20688376490ba7d1dceee1e9

Please use the above install command to update to the latest version.

[github-actions]

[Beta] Generated file diff

Time updated: Sun, 16 Feb 2025 19:03:37 GMT

Integration

    - integration/pages/release-notes/dist/index.css

• integration/pages/release-notes/dist/index.js
• integration/pages/special-error/dist/index.css
• integration/pages/special-error/dist/index.js
• integration/pages/special-error/dist/inline.js

File has changed

Apple

    - dist/pages/release-notes/dist/index.css

• dist/pages/release-notes/dist/index.js
• dist/pages/special-error/dist/index.css
• dist/pages/special-error/dist/index.js
• dist/pages/special-error/dist/inline.js
• dist/pages/special-error/index.html

File has changed

New Files

    - windows/pages/special-error/dist/Malware-Site-128-YUDZDGMR.svg

• windows/pages/special-error/dist/Malware-Site-96-A35AQOKY.svg
• windows/pages/special-error/dist/Shield-Alert-128-NGB6TVH6.svg
• windows/pages/special-error/dist/Shield-Alert-96-W3VSTNOR.svg
• windows/pages/special-error/dist/index.css
• windows/pages/special-error/dist/index.js
• windows/pages/special-error/dist/inline.js
• windows/pages/special-error/index.html
• windows/pages/special-error/locales/bg/special-error.json
• windows/pages/special-error/locales/cs/special-error.json
• windows/pages/special-error/locales/da/special-error.json
• windows/pages/special-error/locales/de/special-error.json
• windows/pages/special-error/locales/el/special-error.json
• windows/pages/special-error/locales/en/special-error.json
• windows/pages/special-error/locales/es/special-error.json
• windows/pages/special-error/locales/et/special-error.json
• windows/pages/special-error/locales/fi/special-error.json
• windows/pages/special-error/locales/fr/special-error.json
• windows/pages/special-error/locales/hr/special-error.json
• windows/pages/special-error/locales/hu/special-error.json
• windows/pages/special-error/locales/it/special-error.json
• windows/pages/special-error/locales/lt/special-error.json
• windows/pages/special-error/locales/lv/special-error.json
• windows/pages/special-error/locales/nb/special-error.json
• windows/pages/special-error/locales/nl/special-error.json
• windows/pages/special-error/locales/pl/special-error.json
• windows/pages/special-error/locales/pt/special-error.json
• windows/pages/special-error/locales/ro/special-error.json
• windows/pages/special-error/locales/ru/special-error.json
• windows/pages/special-error/locales/sk/special-error.json
• windows/pages/special-error/locales/sl/special-error.json
• windows/pages/special-error/locales/sv/special-error.json
• windows/pages/special-error/locales/tr/special-error.json

❌ File only exists in new changeset

[RendijsSmukulis]

Some minor nits:

• The radius around the frame seems off: (left is implementation, right is Figma):

• The margins/padding for text under "Advanced" seems off:

Impl:

Figma:

(The latter seems to be an issue when using ?platform=macos as well:
)

[RendijsSmukulis]

Added a few UI issues in a comment - namely the radius of the corners, and the padding for the "Advanced Info" not looking right

[mgurgel]

Hey, @RendijsSmukulis

• The border radius was a recent decision on the macOS Ship Review that hasn't been reflected on the Figma yet <Asana link>. I'm checking with Thomas whether the change also affects Windows.

• How were you viewing the preview to get the Advanced margin issue? I can't reproduce it myself. This is what I'm seeing in the preview links using a DDG Win browser:

I’ve recently rebased to main which may have fixed the preview and could explain what you saw earlier. Let me know if you can still reproduce it.

[RendijsSmukulis]

(as discussed in MM) the "Advanced margin issue" was caused by "Animate controls and elements inside windows" setting disabled on my machine, which was picked up by prefers-reduced-motion in css.

The fixed version works great on my machine.

[shakyShane]

Question on the amount of screenshot - since we're not verifying in CI yet, is it worth cutting them down to 1 per layout?

for example, phishing-warning-advanced-reduced-motion-macos-darwin.png and
ssl-expired-cert-reduced-motion-macos-darwin.png - the only difference is text I think? if so, it might be better suited to test those variants with faster more reliable things, like DOM/aria tests.

That could cut down on the amount of screenshots for now until we formalize how we want to capture this stuff going forward. I'm slightly worried that if we do this level of screenshot testing for all features it's going to get into the thousands very quickly.

I think using screenshots to verify a particular layout is great - but please have a look if any of them in this PR can be de-duplicated?

[mgurgel]

@shakyShane I’ve cut down the screenshots to the essentials. Thanks for the tip.