duckduckgo · mgurgel · Jan 30, 2025 · Jan 30, 2025 · Jan 30, 2025 · Jan 30, 2025
@@ -34,10 +34,10 @@ function PageTitle() {
     useEffect(() => {
         switch (kind) {
             case 'malware':
-                document.title = t('malwarePageHeading');
+                document.title = t('malwareTabTitle');
                 break;
             case 'phishing':
-                document.title = t('phishingPageHeading');
+                document.title = t('phishingTabTitle');
                 break;
             default:
                 document.title = t('sslPageHeading');

@@ -14,7 +14,6 @@ body {
     top: 0;
     left: 0;
 
-
     @media (max-height: 400px) {
         padding-top: var(--sp-10);
         align-items: flex-start;

@@ -53,7 +53,12 @@ export function WarningHeading() {
     return (
         <header className={classNames(styles.heading, styles[kind])}>
             <i className={styles.icon} aria-hidden="true" />
-            <Text as="h1" variant={platformName === 'macos' ? 'title-2-emphasis' : 'title-2'} strictSpacing={platformName !== 'macos'}>
+            <Text
+                as="h1"
+                variant={platformName === 'macos' ? 'title-2-emphasis' : 'title-2'}
+                strictSpacing={platformName !== 'macos'}
+                className={styles.title}
+            >
                 {heading}
             </Text>
         </header>

@@ -87,6 +87,7 @@
 
     & .content {
         text-align: center;
+        white-space: pre-line; /* Preserve line breaks on all screen sizes */
     }
 
     & .buttonContainer {
@@ -117,12 +118,26 @@
     }
 
     & .phishing .icon, & .malware .icon {
-        background-image: url(../../../../shared/assets/img/icons/Malware-Site-96.svg);
+        background-image: url(../../../../shared/assets/img/icons/Malware-Site-128.svg);
     }
 
-    /* Inserts line break before an inline element. Used for the Learn More link in the Warning text */
-    & [data-line-break]::before {
-        content: ' ';
-        display: block;
+    /* Preserves line breaks on smaller screens to avoid orfan words.
+       This is a 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) {
+    /* Balanced line breaks on title for browsers that support it */
+    [data-platform-name="ios"] {
+        & .title {
+            text-wrap: balance;
+            white-space: normal;
+        }
     }
 }
@@ -27,7 +27,6 @@ const sanitizeURL = (urlString) => {
  */
 
 const helpPageAnchorTagParams = {
-    'data-line-break': true,
     href: phishingMalwareHelpPageURL,
     target: '_blank',
 };
@@ -62,11 +61,11 @@ export function useWarningHeading() {
     const { kind } = useErrorData();
 
     if (kind === 'phishing') {
-        return t('phishingPageHeading');
+        return t('phishingPageHeading').replace('{newline}', '\n');
     }
 
     if (kind === 'malware') {
-        return t('malwarePageHeading');
+        return t('malwarePageHeading').replace('{newline}', '\n');
     }
 
     if (kind === 'ssl') {
@@ -85,11 +84,13 @@ export function useWarningContent() {
     const { kind } = useErrorData();
 
     if (kind === 'phishing') {
-        return [<Trans str={t('phishingWarningText')} values={{ a: helpPageAnchorTagParams }} />];
+        const text = t('phishingWarningText').replace('{newline}', '\n');
+        return [<Trans str={text} values={{ a: helpPageAnchorTagParams }} />];
     }
 
     if (kind === 'malware') {
-        return [<Trans str={t('malwareWarningText')} values={{ a: helpPageAnchorTagParams }} />];
+        const text = t('malwareWarningText').replace('{newline}', '\n');
+        return [<Trans str={text} values={{ a: helpPageAnchorTagParams }} />];
     }
 
     if (kind === 'ssl') {

@@ -150,6 +150,10 @@
 
     async showsExpiredPage() {
         const { page } = this;
+
+        const title = await page.locator('title').textContent();
+        expect(title).toBe('Warning: This site may be insecure');
+
         await expect(page.getByText('Warning: This site may be insecure', { exact: true })).toBeVisible();
         await expect(
             page.getByText(
@@ -174,6 +178,10 @@
 
     async showsInvalidPage() {
         const { page } = this;
+
+        const title = await page.locator('title').textContent();
+        expect(title).toBe('Warning: This site may be insecure');
+
         await expect(page.getByText('Warning: This site may be insecure', { exact: true })).toBeVisible();
         await expect(
             page.getByText(
@@ -193,6 +201,10 @@
 
     async showsSelfSignedPage() {
         const { page } = this;
+
+        const title = await page.locator('title').textContent();
+        expect(title).toBe('Warning: This site may be insecure');
+
         await expect(page.getByText('Warning: This site may be insecure', { exact: true })).toBeVisible();
         await expect(
             page.getByText(
@@ -212,6 +224,10 @@
 
     async showsWrongHostPage() {
         const { page } = this;
+
+        const title = await page.locator('title').textContent();
+        expect(title).toBe('Warning: This site may be insecure');
+
         await expect(page.getByText('Warning: This site may be insecure', { exact: true })).toBeVisible();
         await expect(
             page.getByText(
@@ -231,7 +247,11 @@
 
     async showsPhishingPage() {
         const { page } = this;
-        await expect(page.getByText('Warning: This site may put your personal information at risk', { exact: true })).toBeVisible();
+
+        const title = await page.locator('title').textContent();
+        expect(title).toBe('Warning: Security Risk');
+
+        await expect(page.getByText('Warning: This site may be a security risk', { exact: true })).toBeVisible();
         await expect(
             page.getByText(
                 'This website may be impersonating a legitimate site in order to trick you into providing personal information, such as passwords or credit card numbers. Learn more',
@@ -249,7 +269,11 @@
 
     async showsMalwarePage() {
         const { page } = this;
-        await expect(page.getByText('Warning: This site may put your personal information at risk', { exact: true })).toBeVisible();
+
+        const title = await page.locator('title').textContent();
+        expect(title).toBe('Warning: Security Risk');
+
+        await expect(page.getByText('Warning: This site may be a security risk', { exact: true })).toBeVisible();
         await expect(
             page.getByText(
                 'DuckDuckGo blocked this page because it may be distributing malware designed to compromise your device or steal your personal information. Learn more',

@@ -26,24 +26,32 @@
     "note": "Button shown in an error page that warns users of security risks on a website due to Phishing or Malware issues. The buttons allows the user to visit the website anyway despite the risks."
   },
   "malwarePageHeading": {
-    "title": "Warning: This site may put your personal information at risk",
-    "note": "Title shown in an error page that warn users of security risks on a website due to malware distribution"
+    "title": "Warning: This site may be a{newline}security risk",
+    "note": "Title shown in an error page that warn users of security risks on a website due to malware distribution. The {newline} tag should not be translated. It should be placed within the sentence to avoid having a single word hanging on the last line"
+  },
+  "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. <a>Learn more</a>",
-    "note": "Error description shown in an error page that warns users of security risks on a website due to malware distribution."
+    "title": "DuckDuckGo blocked this page because it may be distributing malware designed to compromise your device or steal your personal information.{newline}<a>Learn more</a>",
+    "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 <a>Learn More</a> text."
   },
   "malwareAdvancedInfoHeading": {
     "title": "If you believe this website is safe, you can <a>report an error</a>. You can still visit the website at your own risk.",
     "note": "Title of the Advanced info section shown in an error page that warns users of security risks on a website due to malware distribution."
   },
   "phishingPageHeading": {
-    "title": "Warning: This site may put your personal information at risk",
-    "note": "Title shown in an error page that warn users of security risks on a website due to Phishing issues"
+    "title": "Warning: This site may be a{newline}security risk",
+    "note": "Title shown in an error page that warn users of security risks on a website due to Phishing issues. The {newline} tag should not be translated. It should be placed within the sentence to avoid having a single word hanging on the last line"
+  },
+  "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. <a>Learn more</a>",
-    "note": "Error description shown in an error page that warns users of security risks on a website due to Phishing issues."
+    "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}<a>Learn more</a>",
+    "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 <a>Learn More</a> text."
   },
   "phishingAdvancedInfoHeading": {
     "title": "If you believe this website is safe, you can <a>report an error</a>. You can still visit the website at your own risk.",