From a3d6577828ff50d31cabfecd7a58799670bfc7b4 Mon Sep 17 00:00:00 2001 From: Marcos Gurgel Date: Thu, 30 Jan 2025 19:17:22 +0000 Subject: [PATCH 01/14] Tab title fix --- .../special-error/public/locales/en/special-error.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/special-pages/pages/special-error/public/locales/en/special-error.json b/special-pages/pages/special-error/public/locales/en/special-error.json index 4fe0536dc..0b71c95d7 100644 --- a/special-pages/pages/special-error/public/locales/en/special-error.json +++ b/special-pages/pages/special-error/public/locales/en/special-error.json @@ -33,6 +33,10 @@ "title": "Warning: Security Risk", "note": "Title shown in the browser window or tab when the current page may be a security risk due to malware" }, + "malwareTabTitle": { + "title": "Warning: Security Risk", + "note": "Title shown in the browser window or tab when the current page may be a security risk due to malware" + }, "malwareWarningText": { "title": "DuckDuckGo blocked this page because it may be distributing malware designed to compromise your device or steal your personal information.{newline}Learn more", "note": "Error description shown in an error page that warns users of security risks on a website due to malware distribution. The {newline} tag should not be translated. It should be placed before the translated Learn More text." @@ -49,6 +53,10 @@ "title": "Warning: Security Risk", "note": "Title shown in the browser window or tab when the current page may be a security risk due to phishing" }, + "phishingTabTitle": { + "title": "Warning: Security Risk", + "note": "Title shown in the browser window or tab when the current page may be a security risk due to phishing" + }, "phishingWarningText": { "title": "This website may be impersonating a legitimate site in order to trick you into providing personal information, such as passwords or credit card numbers.{newline}Learn more", "note": "Error description shown in an error page that warns users of security risks on a website due to Phishing issues. The {newline} tag should not be translated. It should be placed before the translated Learn More text." From b4aceefb4c080636aff506d8b16cc77c7e6fb965 Mon Sep 17 00:00:00 2001 From: Marcos Gurgel Date: Thu, 30 Jan 2025 19:54:56 +0000 Subject: [PATCH 02/14] Fix for hanging word in title --- .../special-error/app/components/Warning.module.css | 9 +++++++++ .../special-error/public/locales/en/special-error.json | 8 -------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/special-pages/pages/special-error/app/components/Warning.module.css b/special-pages/pages/special-error/app/components/Warning.module.css index 476ba0a8b..ccc7bebd9 100644 --- a/special-pages/pages/special-error/app/components/Warning.module.css +++ b/special-pages/pages/special-error/app/components/Warning.module.css @@ -140,4 +140,13 @@ white-space: normal; } } + + /* Forces a line break in the title on smaller screens */ + & .title { + white-space: pre-line; + + @media (min-width: 600px) { + white-space: normal; + } + } } \ No newline at end of file diff --git a/special-pages/pages/special-error/public/locales/en/special-error.json b/special-pages/pages/special-error/public/locales/en/special-error.json index 0b71c95d7..4fe0536dc 100644 --- a/special-pages/pages/special-error/public/locales/en/special-error.json +++ b/special-pages/pages/special-error/public/locales/en/special-error.json @@ -33,10 +33,6 @@ "title": "Warning: Security Risk", "note": "Title shown in the browser window or tab when the current page may be a security risk due to malware" }, - "malwareTabTitle": { - "title": "Warning: Security Risk", - "note": "Title shown in the browser window or tab when the current page may be a security risk due to malware" - }, "malwareWarningText": { "title": "DuckDuckGo blocked this page because it may be distributing malware designed to compromise your device or steal your personal information.{newline}Learn more", "note": "Error description shown in an error page that warns users of security risks on a website due to malware distribution. The {newline} tag should not be translated. It should be placed before the translated Learn More text." @@ -53,10 +49,6 @@ "title": "Warning: Security Risk", "note": "Title shown in the browser window or tab when the current page may be a security risk due to phishing" }, - "phishingTabTitle": { - "title": "Warning: Security Risk", - "note": "Title shown in the browser window or tab when the current page may be a security risk due to phishing" - }, "phishingWarningText": { "title": "This website may be impersonating a legitimate site in order to trick you into providing personal information, such as passwords or credit card numbers.{newline}Learn more", "note": "Error description shown in an error page that warns users of security risks on a website due to Phishing issues. The {newline} tag should not be translated. It should be placed before the translated Learn More text." From 3182e7bfa347a41e2e8e1615df23695d7f8b2121 Mon Sep 17 00:00:00 2001 From: Marcos Gurgel Date: Thu, 30 Jan 2025 23:18:36 +0000 Subject: [PATCH 03/14] text-wrap: balance on warning title --- .../special-error/app/components/Warning.module.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/special-pages/pages/special-error/app/components/Warning.module.css b/special-pages/pages/special-error/app/components/Warning.module.css index ccc7bebd9..1d9743e86 100644 --- a/special-pages/pages/special-error/app/components/Warning.module.css +++ b/special-pages/pages/special-error/app/components/Warning.module.css @@ -141,7 +141,7 @@ } } - /* Forces a line break in the title on smaller screens */ + /* Forces a line break in the title on smaller screens. Fallback for browsers that don't support text-wrap: balance */ & .title { white-space: pre-line; @@ -149,4 +149,13 @@ white-space: normal; } } +} + +@supports (text-wrap: balance) { + [data-platform-name="ios"] { + & .title { + text-wrap: balance; + white-space: normal; + } + } } \ No newline at end of file From ebc0ec8090dc2eedf2dade642db9f7de30ea2859 Mon Sep 17 00:00:00 2001 From: Marcos Gurgel Date: Fri, 31 Jan 2025 09:45:08 +0000 Subject: [PATCH 04/14] Consistent line-breaking --- .../app/components/Warning.module.css | 20 +------------------ 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/special-pages/pages/special-error/app/components/Warning.module.css b/special-pages/pages/special-error/app/components/Warning.module.css index 1d9743e86..a053615a0 100644 --- a/special-pages/pages/special-error/app/components/Warning.module.css +++ b/special-pages/pages/special-error/app/components/Warning.module.css @@ -123,7 +123,7 @@ /* Preserves line breaks on smaller screens to avoid orfan words. This is a fallback for browsers that don't support text-wrap: balance */ - & .title { + & .title { white-space: pre-line; @media (min-width: 600px) { @@ -140,22 +140,4 @@ white-space: normal; } } - - /* Forces a line break in the title on smaller screens. Fallback for browsers that don't support text-wrap: balance */ - & .title { - white-space: pre-line; - - @media (min-width: 600px) { - white-space: normal; - } - } -} - -@supports (text-wrap: balance) { - [data-platform-name="ios"] { - & .title { - text-wrap: balance; - white-space: normal; - } - } } \ No newline at end of file From 64dab058091f5417f910b2d7e9ac51e0deb5710c Mon Sep 17 00:00:00 2001 From: Marcos Gurgel Date: Mon, 23 Dec 2024 16:53:06 +0000 Subject: [PATCH 05/14] Windows support for Malicious website protection --- special-pages/index.mjs | 1 + .../app/components/AdvancedInfo.module.css | 24 ++++++--- .../app/components/App.module.css | 21 ++++++-- .../app/components/Components.jsx | 13 ++--- .../special-error/app/components/Warning.jsx | 52 +++++++++++++------ .../app/components/Warning.module.css | 50 +++++++++++++++++- .../app/providers/SettingsProvider.jsx | 5 ++ .../special-error/app/styles/variables.css | 5 -- .../pages/special-error/src/inline.js | 2 +- .../pages/special-error/src/mock-transport.js | 3 +- .../shared/components/Button/Button.js | 20 ++++--- .../shared/components/Text/Text.module.css | 18 +++++++ 12 files changed, 166 insertions(+), 48 deletions(-) diff --git a/special-pages/index.mjs b/special-pages/index.mjs index 2e5d9f157..d063ada5e 100644 --- a/special-pages/index.mjs +++ b/special-pages/index.mjs @@ -50,6 +50,7 @@ export const support = { 'special-error': { integration: ['copy', 'build-js'], apple: ['copy', 'build-js', 'inline-html'], + windows: ['copy', 'build-js', 'inline-html'], }, /** @type {Partial>} */ 'new-tab': { diff --git a/special-pages/pages/special-error/app/components/AdvancedInfo.module.css b/special-pages/pages/special-error/app/components/AdvancedInfo.module.css index 3cfeb1107..641066f59 100644 --- a/special-pages/pages/special-error/app/components/AdvancedInfo.module.css +++ b/special-pages/pages/special-error/app/components/AdvancedInfo.module.css @@ -49,14 +49,6 @@ /* Platform-specific styles */ -/* macOS */ -[data-platform-name="macos"] { - & .container { - background: var(--advanced-info-bg); - box-shadow: inset 0 1px 0 0 var(--border-color); - } -} - /* iOS */ [data-platform-name="ios"] { & .wrapper { @@ -90,3 +82,19 @@ line-height: calc(21 * var(--px-in-rem)); } } + +/* macOS */ +[data-platform-name="macos"] { + & .container { + background: var(--advanced-info-bg); + box-shadow: inset 0 1px 0 0 var(--border-color); + } +} + +/* windows */ +[data-platform-name="windows"] { + & .container { + background: var(--advanced-info-bg); + box-shadow: inset 0 1px 0 0 var(--border-color); + } +} diff --git a/special-pages/pages/special-error/app/components/App.module.css b/special-pages/pages/special-error/app/components/App.module.css index d3a3fcaeb..982963b29 100644 --- a/special-pages/pages/special-error/app/components/App.module.css +++ b/special-pages/pages/special-error/app/components/App.module.css @@ -2,6 +2,8 @@ html, body { height: 100%; margin: 0; + + --theme-font-family: system, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } .main { @@ -36,6 +38,13 @@ body { /* Platform-specific styles */ +/* iOS */ +[data-platform-name="ios"] { + & .container { + align-items: center; + } +} + /* macOS */ [data-platform-name="macos"] { & .container { @@ -47,9 +56,13 @@ body { } } -/* iOS */ -[data-platform-name="ios"] { +/* Windows */ +[data-platform-name="windows"] { & .container { - align-items: center; + background: var(--container-bg); + border-radius: var(--sp-4); + border: 1px solid var(--border-color); + min-width: calc(400 * var(--px-in-rem)); + width: calc(504 * var(--px-in-rem)); } -} +} \ No newline at end of file diff --git a/special-pages/pages/special-error/app/components/Components.jsx b/special-pages/pages/special-error/app/components/Components.jsx index d59819392..ed3d3bbea 100644 --- a/special-pages/pages/special-error/app/components/Components.jsx +++ b/special-pages/pages/special-error/app/components/Components.jsx @@ -17,10 +17,11 @@ import { AdvancedInfoButton, LeaveSiteButton, Warning, WarningContent, WarningHe * @typedef {SSLExpiredCertificate|SSLInvalidCertificate|SSLSelfSignedCertificate|SSLWrongHost} SSLError */ -/** @type {Record, string>} */ +/** @type {Record, string>} */ const platforms = { - macos: 'macOS', ios: 'iOS', + macos: 'macOS', + windows: 'Windows', }; /** @@ -58,8 +59,8 @@ export function Components() { }; return ( -
-
+
+
-
+ +

Special Error Components

diff --git a/special-pages/pages/special-error/app/components/Warning.jsx b/special-pages/pages/special-error/app/components/Warning.jsx index 7baf28755..487d89a36 100644 --- a/special-pages/pages/special-error/app/components/Warning.jsx +++ b/special-pages/pages/special-error/app/components/Warning.jsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import { useTypedTranslation } from '../types'; import { useMessaging } from '../providers/MessagingProvider'; import { useErrorData } from '../providers/SpecialErrorProvider'; -import { usePlatformName } from '../providers/SettingsProvider'; +import { usePlatformName, useIsMobile } from '../providers/SettingsProvider'; import { useWarningHeading, useWarningContent } from '../hooks/ErrorStrings'; import { Text } from '../../../../shared/components/Text/Text'; import { Button } from '../../../../shared/components/Button/Button'; @@ -16,15 +16,12 @@ import styles from './Warning.module.css'; */ export function AdvancedInfoButton({ onClick }) { const { t } = useTypedTranslation(); - const platformName = usePlatformName(); + const isMobile = useIsMobile(); + const buttonVariant = isMobile ? 'ghost' : 'standard'; return ( - ); } @@ -34,12 +31,22 @@ export function LeaveSiteButton() { const { messaging } = useMessaging(); const platformName = usePlatformName(); + /** @type {import('../../../../shared/components/Button/Button').ButtonProps['variant']} */ + let buttonVariant; + switch (platformName) { + case 'ios': + case 'android': + buttonVariant = 'primary'; + break; + case 'windows': + buttonVariant = 'accentBrand'; + break; + default: + buttonVariant = 'accent'; + } + return ( - ); @@ -49,14 +56,29 @@ export function WarningHeading() { const { kind } = useErrorData(); const heading = useWarningHeading(); const platformName = usePlatformName(); + const isMobile = useIsMobile(); + + /** @type {'title-2'|'title-2-emphasis'|'custom-title-1'} */ + let textVariant; + switch (platformName) { + case 'ios': + case 'android': + textVariant = 'title-2'; + break; + case 'windows': + textVariant = 'custom-title-1'; + break; + default: + textVariant = 'title-2-emphasis'; + } return (