Windows support for Malicious website protection

special-pages/index.mjs

@@ -50,6 +50,7 @@
     'special-error': {
         integration: ['copy', 'build-js'],
         apple: ['copy', 'build-js', 'inline-html'],
+        windows: ['copy', 'build-js', 'inline-html'],
     },
     /** @type {Partial<Record<ImportMeta['injectName'], string[]>>} */
     'new-tab': {
@@ -99,7 +100,7 @@
                 const outputDir = join(pageOutputDirectory, 'dist');
                 buildJobs.push({
                     outputDir,
                     injectName: /** @type {ImportMeta['injectName']} */ (injectName),
                     pageName,
                 });
             }

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);
+    }
+}

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 {
@@ -37,6 +39,13 @@ body {
 
 /* Platform-specific styles */
 
+/* iOS */
+[data-platform-name="ios"] {
+    & .container {
+        align-items: center;
+    }
+}
+
 /* macOS */
 [data-platform-name="macos"] {
     & .container {
@@ -48,9 +57,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));
     }
-}
+}

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<Extract<import("../../types/special-error.js").InitialSetupResponse['platform']['name'], "macos"|"ios">, string>} */
+/** @type {Record<Extract<import("../../types/special-error.js").InitialSetupResponse['platform']['name'], "ios"|"macos"|"windows">, string>} */
 const platforms = {
-    macos: 'macOS',
     ios: 'iOS',
+    macos: 'macOS',
+    windows: 'Windows',
 };
 
 /**
@@ -58,8 +59,8 @@ export function Components() {
     };
 
     return (
-        <div data-theme={isDarkMode ? 'dark' : 'light'}>
-            <div className={styles.selector}>
+        <div>
+            <nav className={styles.selector}>
                 <fieldset>
                     <label for="platform-select">Platform:</label>
                     <select id="platform-select" onChange={(e) => handlePlatformChange(e.currentTarget?.value)}>
@@ -84,8 +85,8 @@ export function Components() {
                         })}
                     </select>
                 </fieldset>
-            </div>
-            <main class={styles.main} data-platform-name={platformName}>
+            </nav>
+            <main class={styles.main} data-platform-name={platformName} data-theme={isDarkMode ? 'dark' : 'light'}>
                 <h1>Special Error Components</h1>
 
                 <section>

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 (
-        <Button
-            variant={platformName === 'macos' ? 'standard' : 'ghost'}
-            className={classNames(styles.button, styles.advanced)}
-            onClick={onClick}
-        >
-            {platformName === 'ios' ? t('advancedButton') : t('advancedEllipsisButton')}
+        <Button variant={buttonVariant} className={classNames(styles.button, styles.advanced)} onClick={onClick}>
+            {isMobile ? t('advancedButton') : t('advancedEllipsisButton')}
         </Button>
     );
 }
@@ -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 (
-        <Button
-            variant={platformName === 'macos' ? 'accent' : 'primary'}
-            className={classNames(styles.button, styles.leaveSite)}
-            onClick={() => messaging?.leaveSite()}
-        >
+        <Button variant={buttonVariant} className={classNames(styles.button, styles.leaveSite)} onClick={() => messaging?.leaveSite()}>
             {t('leaveSiteButton')}
         </Button>
     );
@@ -49,11 +56,26 @@ 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 (
         <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={textVariant} strictSpacing={isMobile}>
                 {heading}
             </Text>
         </header>

special-pages/pages/special-error/app/components/Warning.module.css

@@ -71,7 +71,6 @@
     }
 }
 
-
 /* iOS */
 [data-platform-name="ios"] {
     & .container {
@@ -119,4 +118,53 @@
     & .phishing .icon, & .malware .icon {
         background-image: url(../../../../shared/assets/img/icons/Malware-Site-96.svg);
     }
+}
+
+/* Windows */
+[data-platform-name="windows"] {
+    --border-radius-sm: 6px;
+
+    & .icon {
+        align-self: flex-start;
+        flex: 0 0 var(--sp-12);
+        height: var(--sp-12);
+        width: var(--sp-12);
+    }
+
+    & .heading {
+        gap: var(--sp-4);
+    }
+
+    & .ssl.heading {
+        height: var(--sp-8);
+    }
+
+    & .ssl .icon {
+        background-image: url(../../../../shared/assets/img/icons/Shield-Alert-96.svg);
+        margin-left: calc(-1 * var(--sp-2));
+        margin-top: calc(-1 * var(--sp-2));
+    }
+
+    & .phishing .icon, & .malware .icon {
+        background-image: url(../../../../shared/assets/img/icons/Malware-Site-96.svg);
+        margin-left: calc(-1 * var(--sp-2));
+        margin-right: calc(-1 * var(--sp-1));
+    }
+
+    & .buttonContainer {
+        flex-flow: row-reverse;
+        gap: var(--sp-4);
+        justify-content: flex-end;
+    }
+
+    & .button {
+        flex: 0 0 calc(50% - var(--sp-2));
+
+        /* TODO: Move to shared? */
+        font-family: var(--theme-font-family);
+        font-size: calc(14 * var(--px-in-rem));
+        font-weight: 400;
+        line-height: normal;
+    }
+
 }

special-pages/pages/special-error/app/providers/SettingsProvider.jsx

@@ -17,3 +17,8 @@ export function SettingsProvider({ settings, children }) {
 export function usePlatformName() {
     return useContext(SettingsContext).settings.platform?.name;
 }
+
+export function useIsMobile() {
+    const platformName = useContext(SettingsContext).settings.platform?.name;
+    return platformName === 'android' || platformName === 'ios';
+}

special-pages/pages/special-error/app/styles/variables.css

@@ -30,9 +30,4 @@
     }
 }
 
-[data-platform-name="macos"], [data-platform-name="ios"] {
-    --theme-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
-}
-
-
 

special-pages/pages/special-error/src/inline.js

@@ -3,7 +3,7 @@
  * that might be needed in CSS or JS
  */
 
-const param = new URLSearchParams(window.location.search).get('platform');
+const param = new URLSearchParams(window.location.search).get('injectName');
 
 if (isAllowed(param)) {
     document.documentElement.dataset.platform = String(param);

special-pages/pages/special-error/src/mock-transport.js

@@ -15,6 +15,7 @@ export function mockTransport() {
 
             /** @type {import('../types/special-error.js').SpecialErrorMessages['requests']} */
             const msg = /** @type {any} */ (_msg);
+
             switch (msg.method) {
                 case 'initialSetup': {
                     const searchParams = new URLSearchParams(window.location.search);
@@ -27,7 +28,7 @@ export function mockTransport() {
                         errorData = sampleData[errorId].data;
                     }
 
-                    const supportedPlatforms = ['macos', 'ios'];
+                    const supportedPlatforms = ['ios', 'macos', 'windows'];
                     /** @type {import('../types/special-error.js').InitialSetupResponse['platform']} */
                     let platform = { name: 'macos' };
                     if (platformName && supportedPlatforms.includes(platformName)) {

special-pages/shared/components/Button/Button.js

@@ -3,13 +3,19 @@ import classNames from 'classnames';
 import styles from './Button.module.css';
 
 /**
- * @param {object} props
- * @param {string} [props.className]
- * @param {'primary'|'standard'|'accent'|'accentBrand'|'ghost'} [props.variant]
- * @param {'button'|'submit'|'reset'} [props.type]
- * @param {import("preact").ComponentChild} props.children
- * @param {import("preact").JSX.MouseEventHandler<EventTarget>} [props.onClick]
- * @param {import('preact').ComponentProps<'button'>} [props.otherProps]
+ * @typedef {object} ButtonProps
+ * @property {string} [className]
+ * @property {'primary'|'standard'|'accent'|'accentBrand'|'ghost'} [variant]
+ * @property {'button'|'submit'|'reset'} [type]
+ * @property {import("preact").ComponentChild} children
+ * @property {import("preact").JSX.MouseEventHandler<EventTarget>} [onClick]
+ * @property {import('preact').ComponentProps<'button'>} [otherProps]
+ */
+
+/**
+ *
+ * @param {ButtonProps} props
+ * @returns
  */
 export function Button({ variant, className, children, onClick, type = 'button' }) {
     return (

special-pages/shared/components/Text/Text.module.css

@@ -126,4 +126,22 @@ a {
             letter-spacing: calc(-0.31 * var(--px-in-rem));
         }
     }
+}
+
+[data-platform-name="windows"] {
+    /* This is a custom style that does not exist in the Design System
+       It's used by the Special Error page on Windows */
+    & .custom-title-1 { 
+        font-size: calc(18 * var(--px-in-rem));
+        font-weight: 600;
+        line-height: calc(22 * var(--px-in-rem));
+        letter-spacing: normal;
+    }
+
+    & .body {
+        font-size: calc(14 * var(--px-in-rem));
+        font-weight: 400;
+        line-height: calc(20 * var(--px-in-rem));
+        letter-spacing: normal;
+    }
 }