Skip to content

Commit 0dd18bb

Browse files
GarboMuffinGarboMuffin
committed
Update WebGL error modal
- suggest restarting as most common solution - suggest toggling hardware acceleration - desktop app: add desktop settings button, remove references to "your browser" and similar - remove lockdown mode link; not used enough to justify
1 parent 7c0b01b commit 0dd18bb

3 files changed

Lines changed: 80 additions & 45 deletions

File tree

‎src/components/browser-modal/browser-modal.css‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,26 @@
4747
.body {
4848
background: $ui-modal-background;
4949
padding: 1.5rem 2.25rem;
50-
text-align: center;
5150
display: flex;
5251
flex-direction: column;
5352
gap: 0.25rem;
5453
}
54+
55+
.title {
56+
text-align: center;
57+
}
58+
59+
.desktop-settings-outer {
60+
display: flex;
61+
justify-content: center;
62+
}
63+
64+
.desktop-settings-inner {
65+
font: inherit;
66+
font-weight: bold;
67+
padding: 0.75rem 1rem;
68+
border-radius: 0.25rem;
69+
border: 1px solid $ui-black-transparent;
70+
background-color: $looks-secondary;
71+
color: white;
72+
}

‎src/components/browser-modal/browser-modal.jsx‎

Lines changed: 57 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,34 @@ import {
88
isNewFunctionSupported,
99
findIncompatibleUserscripts
1010
} from '../../lib/tw-environment-support-prober.js';
11+
import {APP_NAME} from '../../lib/brand.js';
1112

1213
import styles from './browser-modal.css';
1314
import unhappyBrowser from './unsupported-browser.svg';
1415

1516
const messages = defineMessages({
16-
label: {
17+
browserNotSupported: {
1718
id: 'gui.unsupportedBrowser.label',
1819
defaultMessage: 'Browser is not supported',
1920
description: ''
21+
},
22+
systemNotSupported: {
23+
id: 'tw.browserModal.desktopTitle',
24+
defaultMessage: 'System is not supported',
25+
description: 'Title of error message in desktop app when system does not support required API, such as WebGL'
2026
}
2127
});
2228

2329
const noop = () => {};
2430

2531
const BrowserModal = ({intl, ...props}) => {
26-
const label = messages.label;
32+
const title = props.onClickDesktopSettings ? messages.systemNotSupported : messages.browserNotSupported;
2733
const incompatibleUserscripts = findIncompatibleUserscripts();
2834
return (
2935
<ReactModal
3036
isOpen
3137
className={styles.modalContent}
32-
contentLabel={intl.formatMessage({...messages.label})}
38+
contentLabel={intl.formatMessage(title)}
3339
overlayClassName={styles.modalOverlay}
3440
onRequestClose={noop}
3541
>
@@ -42,8 +48,8 @@ const BrowserModal = ({intl, ...props}) => {
4248
</Box>
4349

4450
<Box className={styles.body}>
45-
<h2>
46-
<FormattedMessage {...label} />
51+
<h2 className={styles.title}>
52+
<FormattedMessage {...title} />
4753
</h2>
4854

4955
{/* eslint-disable max-len */}
@@ -68,49 +74,56 @@ const BrowserModal = ({intl, ...props}) => {
6874
<React.Fragment>
6975
<p>
7076
<FormattedMessage
71-
defaultMessage="Your browser {webGlLink} which is needed for this site to run. Try updating your browser and graphics drivers or restarting your computer."
72-
description="WebGL missing message. {webGLLink} is a link with the text 'does not support WebGL' from Scratch's translations"
73-
id="tw.webglModal.description"
77+
defaultMessage="{APP_NAME} requires WebGL, however your computer does not seem to support it. This is often a temporary error that can be fixed by restarting your computer."
78+
description="Error message when browser does not support WebGL."
79+
id="tw.browserModal.webgl1"
7480
values={{
75-
webGlLink: (
76-
<a href="https://get.webgl.org/">
77-
<FormattedMessage
78-
defaultMessage="does not support WebGL"
79-
description="link part of your browser does not support WebGL message"
80-
id="gui.webglModal.webgllink"
81-
/>
82-
</a>
83-
)
84-
}}
85-
/>
86-
</p>
87-
<p>
88-
<FormattedMessage
89-
defaultMessage="Make sure you're using a recent version of Google Chrome, Mozilla Firefox, Microsoft Edge, or Apple Safari."
90-
description="A message that appears in the browser not supported modal"
91-
id="tw.browserModal.desc"
92-
/>
93-
</p>
94-
<p>
95-
<FormattedMessage
96-
defaultMessage="On Apple devices, you must disable {lockdownMode}."
97-
description="Part of the browser not supported message. Lockdown Mode refers to https://support.apple.com/en-us/HT212650"
98-
id="tw.lockdownMode"
99-
values={{
100-
lockdownMode: (
101-
<a href="https://support.apple.com/en-us/HT212650">
102-
<FormattedMessage
103-
defaultMessage="Lockdown Mode"
104-
description="Links to an Apple support page about Lockdown Mode: https://support.apple.com/en-us/HT212650 Try to translate this the same as Apple."
105-
id="tw.lockdownMode2"
106-
/>
107-
</a>
108-
)
81+
APP_NAME
10982
}}
11083
/>
11184
</p>
85+
86+
{props.onClickDesktopSettings ? (
87+
<React.Fragment>
88+
<p>
89+
<FormattedMessage
90+
defaultMessage={'You can also try toggling the "Hardware Acceleration" option in desktop settings:'}
91+
description="Error message when browser does not support WebGL (desktop app version)"
92+
id="tw.browserModal.webglDesktop"
93+
values={{
94+
APP_NAME
95+
}}
96+
/>
97+
</p>
98+
<div className={styles.desktopSettingsOuter}>
99+
<button
100+
onClick={props.onClickDesktopSettings}
101+
className={styles.desktopSettingsInner}
102+
>
103+
<FormattedMessage
104+
defaultMessage="Open Desktop Settings"
105+
description="Button in unsupported system modal to open desktop settings"
106+
id="tw.browserModal.desktopSettings"
107+
/>
108+
</button>
109+
</div>
110+
</React.Fragment>
111+
) : (
112+
<p>
113+
<FormattedMessage
114+
defaultMessage={'Use a recent version of Chrome, Firefox, or Safari, and ensure your graphics drivers are up to date. You can also try toggling the "Graphics Acceleration" or "Hardware Acceleration" option in your browser\'s settings.'}
115+
description="Error message when browser does not support WebGL (browser version). Chrome calls it graphics acceleration and Firefox calls it hardware acceleration; consider seeing how they actually translate these"
116+
id="tw.browserModal.webglBrowser"
117+
values={{
118+
APP_NAME
119+
}}
120+
/>
121+
</p>
122+
)}
112123
</React.Fragment>
113124
)}
125+
126+
{/* eslint-enable max-len */}
114127
</Box>
115128
</div>
116129
</ReactModal>
@@ -119,7 +132,8 @@ const BrowserModal = ({intl, ...props}) => {
119132

120133
BrowserModal.propTypes = {
121134
intl: intlShape.isRequired,
122-
isRtl: PropTypes.bool
135+
isRtl: PropTypes.bool,
136+
onClickDesktopSettings: PropTypes.func
123137
};
124138

125139
const WrappedBrowserModal = injectIntl(BrowserModal);

‎src/components/gui/gui.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,10 @@ const GUIComponent = props => {
255255
/>
256256
) : null}
257257
{isBrowserSupported() ? null : (
258-
<BrowserModal isRtl={isRtl} />
258+
<BrowserModal
259+
isRtl={isRtl}
260+
onClickDesktopSettings={onClickDesktopSettings}
261+
/>
259262
)}
260263
{tipsLibraryVisible ? (
261264
<TipsLibrary />

0 commit comments

Comments
 (0)