Skip to content

Commit 52d7477

Browse files
mgurgelmgurgel
committed
Windows support for Malicious website protection
1 parent 8e76460 commit 52d7477

File tree

12 files changed

+165
-47
lines changed

12 files changed

+165
-47
lines changed

Diff for: ‎special-pages/index.mjs

+1
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export const support = {
5050
'special-error': {
5151
integration: ['copy', 'build-js'],
5252
apple: ['copy', 'build-js', 'inline-html'],
53+
windows: ['copy', 'build-js', 'inline-html'],
5354
},
5455
/** @type {Partial<Record<ImportMeta['injectName'], string[]>>} */
5556
'new-tab': {

Diff for: ‎special-pages/pages/special-error/app/components/AdvancedInfo.module.css

+16-8
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,6 @@
4949

5050
/* Platform-specific styles */
5151

52-
/* macOS */
53-
[data-platform-name="macos"] {
54-
& .container {
55-
background: var(--advanced-info-bg);
56-
box-shadow: inset 0 1px 0 0 var(--border-color);
57-
}
58-
}
59-
6052
/* iOS */
6153
[data-platform-name="ios"] {
6254
& .wrapper {
@@ -90,3 +82,19 @@
9082
line-height: calc(21 * var(--px-in-rem));
9183
}
9284
}
85+
86+
/* macOS */
87+
[data-platform-name="macos"] {
88+
& .container {
89+
background: var(--advanced-info-bg);
90+
box-shadow: inset 0 1px 0 0 var(--border-color);
91+
}
92+
}
93+
94+
/* windows */
95+
[data-platform-name="windows"] {
96+
& .container {
97+
background: var(--advanced-info-bg);
98+
box-shadow: inset 0 1px 0 0 var(--border-color);
99+
}
100+
}

Diff for: ‎special-pages/pages/special-error/app/components/App.module.css

+17-4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ html,
22
body {
33
height: 100%;
44
margin: 0;
5+
6+
--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";
57
}
68

79
.main {
@@ -37,6 +39,13 @@ body {
3739

3840
/* Platform-specific styles */
3941

42+
/* iOS */
43+
[data-platform-name="ios"] {
44+
& .container {
45+
align-items: center;
46+
}
47+
}
48+
4049
/* macOS */
4150
[data-platform-name="macos"] {
4251
& .container {
@@ -48,9 +57,13 @@ body {
4857
}
4958
}
5059

51-
/* iOS */
52-
[data-platform-name="ios"] {
60+
/* Windows */
61+
[data-platform-name="windows"] {
5362
& .container {
54-
align-items: center;
63+
background: var(--container-bg);
64+
border-radius: var(--sp-4);
65+
border: 1px solid var(--border-color);
66+
min-width: calc(400 * var(--px-in-rem));
67+
width: calc(504 * var(--px-in-rem));
5568
}
56-
}
69+
}

Diff for: ‎special-pages/pages/special-error/app/components/Components.jsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,11 @@ import { AdvancedInfoButton, LeaveSiteButton, Warning, WarningContent, WarningHe
1717
* @typedef {SSLExpiredCertificate|SSLInvalidCertificate|SSLSelfSignedCertificate|SSLWrongHost} SSLError
1818
*/
1919

20-
/** @type {Record<Extract<import("../../types/special-error.js").InitialSetupResponse['platform']['name'], "macos"|"ios">, string>} */
20+
/** @type {Record<Extract<import("../../types/special-error.js").InitialSetupResponse['platform']['name'], "ios"|"macos"|"windows">, string>} */
2121
const platforms = {
22-
macos: 'macOS',
2322
ios: 'iOS',
23+
macos: 'macOS',
24+
windows: 'Windows',
2425
};
2526

2627
/**
@@ -58,8 +59,8 @@ export function Components() {
5859
};
5960

6061
return (
61-
<div data-theme={isDarkMode ? 'dark' : 'light'}>
62-
<div className={styles.selector}>
62+
<div>
63+
<nav className={styles.selector}>
6364
<fieldset>
6465
<label for="platform-select">Platform:</label>
6566
<select id="platform-select" onChange={(e) => handlePlatformChange(e.currentTarget?.value)}>
@@ -84,8 +85,8 @@ export function Components() {
8485
})}
8586
</select>
8687
</fieldset>
87-
</div>
88-
<main class={styles.main} data-platform-name={platformName}>
88+
</nav>
89+
<main class={styles.main} data-platform-name={platformName} data-theme={isDarkMode ? 'dark' : 'light'}>
8990
<h1>Special Error Components</h1>
9091

9192
<section>

Diff for: ‎special-pages/pages/special-error/app/components/Warning.jsx

+36-14
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import classNames from 'classnames';
33
import { useTypedTranslation } from '../types';
44
import { useMessaging } from '../providers/MessagingProvider';
55
import { useErrorData } from '../providers/SpecialErrorProvider';
6-
import { usePlatformName } from '../providers/SettingsProvider';
6+
import { usePlatformName, useIsMobile } from '../providers/SettingsProvider';
77
import { useWarningHeading, useWarningContent } from '../hooks/ErrorStrings';
88
import { Text } from '../../../../shared/components/Text/Text';
99
import { Button } from '../../../../shared/components/Button/Button';
@@ -16,15 +16,12 @@ import styles from './Warning.module.css';
1616
*/
1717
export function AdvancedInfoButton({ onClick }) {
1818
const { t } = useTypedTranslation();
19-
const platformName = usePlatformName();
19+
const isMobile = useIsMobile();
20+
const buttonVariant = isMobile ? 'ghost' : 'standard';
2021

2122
return (
22-
<Button
23-
variant={platformName === 'macos' ? 'standard' : 'ghost'}
24-
className={classNames(styles.button, styles.advanced)}
25-
onClick={onClick}
26-
>
27-
{platformName === 'ios' ? t('advancedButton') : t('advancedEllipsisButton')}
23+
<Button variant={buttonVariant} className={classNames(styles.button, styles.advanced)} onClick={onClick}>
24+
{isMobile ? t('advancedButton') : t('advancedEllipsisButton')}
2825
</Button>
2926
);
3027
}
@@ -34,12 +31,22 @@ export function LeaveSiteButton() {
3431
const { messaging } = useMessaging();
3532
const platformName = usePlatformName();
3633

34+
/** @type {import('../../../../shared/components/Button/Button').ButtonProps['variant']} */
35+
let buttonVariant;
36+
switch (platformName) {
37+
case 'ios':
38+
case 'android':
39+
buttonVariant = 'primary';
40+
break;
41+
case 'windows':
42+
buttonVariant = 'accentBrand';
43+
break;
44+
default:
45+
buttonVariant = 'accent';
46+
}
47+
3748
return (
38-
<Button
39-
variant={platformName === 'macos' ? 'accent' : 'primary'}
40-
className={classNames(styles.button, styles.leaveSite)}
41-
onClick={() => messaging?.leaveSite()}
42-
>
49+
<Button variant={buttonVariant} className={classNames(styles.button, styles.leaveSite)} onClick={() => messaging?.leaveSite()}>
4350
{t('leaveSiteButton')}
4451
</Button>
4552
);
@@ -49,11 +56,26 @@ export function WarningHeading() {
4956
const { kind } = useErrorData();
5057
const heading = useWarningHeading();
5158
const platformName = usePlatformName();
59+
const isMobile = useIsMobile();
60+
61+
/** @type {'title-2'|'title-2-emphasis'|'custom-title-1'} */
62+
let textVariant;
63+
switch (platformName) {
64+
case 'ios':
65+
case 'android':
66+
textVariant = 'title-2';
67+
break;
68+
case 'windows':
69+
textVariant = 'custom-title-1';
70+
break;
71+
default:
72+
textVariant = 'title-2-emphasis';
73+
}
5274

5375
return (
5476
<header className={classNames(styles.heading, styles[kind])}>
5577
<i className={styles.icon} aria-hidden="true" />
56-
<Text as="h1" variant={platformName === 'macos' ? 'title-2-emphasis' : 'title-2'} strictSpacing={platformName !== 'macos'}>
78+
<Text as="h1" variant={textVariant} strictSpacing={isMobile}>
5779
{heading}
5880
</Text>
5981
</header>

Diff for: ‎special-pages/pages/special-error/app/components/Warning.module.css

+49-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@
7171
}
7272
}
7373

74-
7574
/* iOS */
7675
[data-platform-name="ios"] {
7776
& .container {
@@ -119,4 +118,53 @@
119118
& .phishing .icon, & .malware .icon {
120119
background-image: url(../../../../shared/assets/img/icons/Malware-Site-96.svg);
121120
}
121+
}
122+
123+
/* Windows */
124+
[data-platform-name="windows"] {
125+
--border-radius-sm: 6px;
126+
127+
& .icon {
128+
align-self: flex-start;
129+
flex: 0 0 var(--sp-12);
130+
height: var(--sp-12);
131+
width: var(--sp-12);
132+
}
133+
134+
& .heading {
135+
gap: var(--sp-4);
136+
}
137+
138+
& .ssl.heading {
139+
height: var(--sp-8);
140+
}
141+
142+
& .ssl .icon {
143+
background-image: url(../../../../shared/assets/img/icons/Shield-Alert-96.svg);
144+
margin-left: calc(-1 * var(--sp-2));
145+
margin-top: calc(-1 * var(--sp-2));
146+
}
147+
148+
& .phishing .icon, & .malware .icon {
149+
background-image: url(../../../../shared/assets/img/icons/Malware-Site-96.svg);
150+
margin-left: calc(-1 * var(--sp-2));
151+
margin-right: calc(-1 * var(--sp-1));
152+
}
153+
154+
& .buttonContainer {
155+
flex-flow: row-reverse;
156+
gap: var(--sp-4);
157+
justify-content: flex-end;
158+
}
159+
160+
& .button {
161+
flex: 0 0 calc(50% - var(--sp-2));
162+
163+
/* TODO: Move to shared? */
164+
font-family: var(--theme-font-family);
165+
font-size: calc(14 * var(--px-in-rem));
166+
font-weight: 400;
167+
line-height: normal;
168+
}
169+
122170
}

Diff for: ‎special-pages/pages/special-error/app/providers/SettingsProvider.jsx

+5
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,8 @@ export function SettingsProvider({ settings, children }) {
1717
export function usePlatformName() {
1818
return useContext(SettingsContext).settings.platform?.name;
1919
}
20+
21+
export function useIsMobile() {
22+
const platformName = useContext(SettingsContext).settings.platform?.name;
23+
return platformName === 'android' || platformName === 'ios';
24+
}

Diff for: ‎special-pages/pages/special-error/app/styles/variables.css

-5
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,4 @@
3030
}
3131
}
3232

33-
[data-platform-name="macos"], [data-platform-name="ios"] {
34-
--theme-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
35-
}
36-
37-
3833

Diff for: ‎special-pages/pages/special-error/src/inline.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* that might be needed in CSS or JS
44
*/
55

6-
const param = new URLSearchParams(window.location.search).get('platform');
6+
const param = new URLSearchParams(window.location.search).get('injectName');
77

88
if (isAllowed(param)) {
99
document.documentElement.dataset.platform = String(param);

Diff for: ‎special-pages/pages/special-error/src/mock-transport.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export function mockTransport() {
1515

1616
/** @type {import('../types/special-error.js').SpecialErrorMessages['requests']} */
1717
const msg = /** @type {any} */ (_msg);
18+
1819
switch (msg.method) {
1920
case 'initialSetup': {
2021
const searchParams = new URLSearchParams(window.location.search);
@@ -27,7 +28,7 @@ export function mockTransport() {
2728
errorData = sampleData[errorId].data;
2829
}
2930

30-
const supportedPlatforms = ['macos', 'ios'];
31+
const supportedPlatforms = ['ios', 'macos', 'windows'];
3132
/** @type {import('../types/special-error.js').InitialSetupResponse['platform']} */
3233
let platform = { name: 'macos' };
3334
if (platformName && supportedPlatforms.includes(platformName)) {

Diff for: ‎special-pages/shared/components/Button/Button.js

+13-7
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,19 @@ import classNames from 'classnames';
33
import styles from './Button.module.css';
44

55
/**
6-
* @param {object} props
7-
* @param {string} [props.className]
8-
* @param {'primary'|'standard'|'accent'|'accentBrand'|'ghost'} [props.variant]
9-
* @param {'button'|'submit'|'reset'} [props.type]
10-
* @param {import("preact").ComponentChild} props.children
11-
* @param {import("preact").JSX.MouseEventHandler<EventTarget>} [props.onClick]
12-
* @param {import('preact').ComponentProps<'button'>} [props.otherProps]
6+
* @typedef {object} ButtonProps
7+
* @property {string} [className]
8+
* @property {'primary'|'standard'|'accent'|'accentBrand'|'ghost'} [variant]
9+
* @property {'button'|'submit'|'reset'} [type]
10+
* @property {import("preact").ComponentChild} children
11+
* @property {import("preact").JSX.MouseEventHandler<EventTarget>} [onClick]
12+
* @property {import('preact').ComponentProps<'button'>} [otherProps]
13+
*/
14+
15+
/**
16+
*
17+
* @param {ButtonProps} props
18+
* @returns
1319
*/
1420
export function Button({ variant, className, children, onClick, type = 'button' }) {
1521
return (

Diff for: ‎special-pages/shared/components/Text/Text.module.css

+18
Original file line numberDiff line numberDiff line change
@@ -126,4 +126,22 @@ a {
126126
letter-spacing: calc(-0.31 * var(--px-in-rem));
127127
}
128128
}
129+
}
130+
131+
[data-platform-name="windows"] {
132+
/* This is a custom style that does not exist in the Design System
133+
It's used by the Special Error page on Windows */
134+
& .custom-title-1 {
135+
font-size: calc(18 * var(--px-in-rem));
136+
font-weight: 600;
137+
line-height: calc(22 * var(--px-in-rem));
138+
letter-spacing: normal;
139+
}
140+
141+
& .body {
142+
font-size: calc(14 * var(--px-in-rem));
143+
font-weight: 400;
144+
line-height: calc(20 * var(--px-in-rem));
145+
letter-spacing: normal;
146+
}
129147
}

0 commit comments

Comments
 (0)