This repository has been archived by the owner on Sep 11, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 828
Warn users on unsupported browsers before they lack features #12830
Merged
Merged
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| /* | ||
| Copyright 2024 The Matrix.org Foundation C.I.C. | ||
|
|
||
| Licensed under the Apache License, Version 2.0 (the "License"); | ||
| you may not use this file except in compliance with the License. | ||
| You may obtain a copy of the License at | ||
|
|
||
| http://www.apache.org/licenses/LICENSE-2.0 | ||
|
|
||
| Unless required by applicable law or agreed to in writing, software | ||
| distributed under the License is distributed on an "AS IS" BASIS, | ||
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| See the License for the specific language governing permissions and | ||
| limitations under the License. | ||
| */ | ||
|
|
||
| declare module "electron-to-chromium/versions" { | ||
| const versionMap: { | ||
| [electronVersion: string]: string; | ||
| }; | ||
| export default versionMap; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| /* | ||
| Copyright 2024 The Matrix.org Foundation C.I.C. | ||
|
|
||
| Licensed under the Apache License, Version 2.0 (the "License"); | ||
| you may not use this file except in compliance with the License. | ||
| You may obtain a copy of the License at | ||
|
|
||
| http://www.apache.org/licenses/LICENSE-2.0 | ||
|
|
||
| Unless required by applicable law or agreed to in writing, software | ||
| distributed under the License is distributed on an "AS IS" BASIS, | ||
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| See the License for the specific language governing permissions and | ||
| limitations under the License. | ||
| */ | ||
|
|
||
| import { logger } from "matrix-js-sdk/src/logger"; | ||
| import browserlist from "browserslist"; | ||
| import electronToChromium from "electron-to-chromium/versions"; | ||
|
|
||
| import { DeviceType, parseUserAgent } from "./utils/device/parseUserAgent"; | ||
| import ToastStore from "./stores/ToastStore"; | ||
| import GenericToast from "./components/views/toasts/GenericToast"; | ||
| import { _t } from "./languageHandler"; | ||
| import SdkConfig from "./SdkConfig"; | ||
|
|
||
| export const LOCAL_STORAGE_KEY = "mx_accepts_unsupported_browser"; | ||
| const TOAST_KEY = "unsupportedbrowser"; | ||
|
|
||
| const SUPPORTED_DEVICE_TYPES = [DeviceType.Web, DeviceType.Desktop]; | ||
| const SUPPORTED_BROWSER_QUERY = | ||
| "last 2 Chrome versions, last 2 Firefox versions, last 2 Safari versions, last 2 Edge versions"; | ||
| const LEARN_MORE_URL = "https://github.com/element-hq/element-web#supported-environments"; | ||
|
|
||
| function onLearnMoreClick(): void { | ||
| onDismissClick(); | ||
| window.open(LEARN_MORE_URL, "_blank", "noopener,noreferrer"); | ||
| } | ||
|
|
||
| function onDismissClick(): void { | ||
| localStorage.setItem(LOCAL_STORAGE_KEY, String(true)); | ||
| ToastStore.sharedInstance().dismissToast(TOAST_KEY); | ||
| } | ||
|
|
||
| function getBrowserNameVersion(browser: string): [name: string, version: number] { | ||
| const [browserName, browserVersion] = browser.split(" "); | ||
| const browserNameLc = browserName.toLowerCase(); | ||
| if (browserNameLc === "electron") { | ||
| // The electron-to-chromium map is keyed by the major and minor version of Electron | ||
| const chromiumVersion = electronToChromium[browserVersion.split(".").slice(0, 2).join(".")]; | ||
| if (chromiumVersion) { | ||
| return ["chrome", parseInt(chromiumVersion, 10)]; | ||
| } | ||
| } | ||
|
|
||
| return [browserNameLc, parseInt(browserVersion, 10)]; | ||
| } | ||
|
|
||
| /** | ||
| * Function to check if the current browser is considered supported by our support policy. | ||
| * Based on user agent parsing so may be inaccurate if the user has fingerprint prevention turned up to 11. | ||
| */ | ||
| export function getBrowserSupport(): boolean { | ||
| const browsers = browserlist(SUPPORTED_BROWSER_QUERY).sort(); | ||
| const minimumBrowserVersions = new Map<string, number>(); | ||
| for (const browser of browsers) { | ||
| const [browserName, browserVersion] = getBrowserNameVersion(browser); | ||
| // We sorted the browsers so will encounter the minimum version first | ||
| if (minimumBrowserVersions.has(browserName)) continue; | ||
| minimumBrowserVersions.set(browserName, browserVersion); | ||
| } | ||
|
|
||
| const details = parseUserAgent(navigator.userAgent); | ||
|
|
||
| let supported = true; | ||
| if (!SUPPORTED_DEVICE_TYPES.includes(details.deviceType)) { | ||
| logger.warn("Browser unsupported, unsupported device type", details.deviceType); | ||
| supported = false; | ||
| } | ||
|
|
||
| if (details.client) { | ||
| const [browserName, browserVersion] = getBrowserNameVersion(details.client); | ||
| const minimumVersion = minimumBrowserVersions.get(browserName); | ||
| // Check both with the sub-version cut off and without as some browsers have less granular versioning e.g. Safari | ||
| if (!minimumVersion || browserVersion < minimumVersion) { | ||
| logger.warn("Browser unsupported, unsupported user agent", details.client); | ||
| supported = false; | ||
| } | ||
| } else { | ||
| logger.warn("Browser unsupported, unknown client", navigator.userAgent); | ||
| supported = false; | ||
| } | ||
|
|
||
| return supported; | ||
| } | ||
|
|
||
| /** | ||
| * Shows a user warning toast if the user's browser is not supported. | ||
| */ | ||
| export function checkBrowserSupport(): void { | ||
| const supported = getBrowserSupport(); | ||
| if (supported) return; | ||
|
|
||
| if (localStorage.getItem(LOCAL_STORAGE_KEY)) { | ||
| logger.warn("Browser unsupported, but user has previously accepted"); | ||
| return; | ||
| } | ||
|
|
||
| const brand = SdkConfig.get().brand; | ||
| ToastStore.sharedInstance().addOrReplaceToast({ | ||
| key: TOAST_KEY, | ||
| title: _t("unsupported_browser|title", { brand }), | ||
| props: { | ||
| description: _t("unsupported_browser|description", { brand }), | ||
| acceptLabel: _t("action|learn_more"), | ||
| onAccept: onLearnMoreClick, | ||
| rejectLabel: _t("action|dismiss"), | ||
| onReject: onDismissClick, | ||
| }, | ||
| component: GenericToast, | ||
| priority: 40, | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| /* | ||
| Copyright 2024 The Matrix.org Foundation C.I.C. | ||
|
|
||
| Licensed under the Apache License, Version 2.0 (the "License"); | ||
| you may not use this file except in compliance with the License. | ||
| You may obtain a copy of the License at | ||
|
|
||
| http://www.apache.org/licenses/LICENSE-2.0 | ||
|
|
||
| Unless required by applicable law or agreed to in writing, software | ||
| distributed under the License is distributed on an "AS IS" BASIS, | ||
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| See the License for the specific language governing permissions and | ||
| limitations under the License. | ||
| */ | ||
|
|
||
| import { logger } from "matrix-js-sdk/src/logger"; | ||
|
|
||
| import { checkBrowserSupport, LOCAL_STORAGE_KEY } from "../src/SupportedBrowser"; | ||
| import ToastStore from "../src/stores/ToastStore"; | ||
| import GenericToast from "../src/components/views/toasts/GenericToast"; | ||
|
|
||
| jest.mock("matrix-js-sdk/src/logger"); | ||
|
|
||
| describe("SupportedBrowser", () => { | ||
| beforeEach(() => { | ||
| jest.resetAllMocks(); | ||
| localStorage.clear(); | ||
| }); | ||
|
|
||
| const testUserAgentFactory = | ||
| (expectedWarning?: string) => | ||
| async (userAgent: string): Promise<void> => { | ||
| const toastSpy = jest.spyOn(ToastStore.sharedInstance(), "addOrReplaceToast"); | ||
| const warnLogSpy = jest.spyOn(logger, "warn"); | ||
| Object.defineProperty(window, "navigator", { value: { userAgent: userAgent }, writable: true }); | ||
| checkBrowserSupport(); | ||
| if (expectedWarning) { | ||
| expect(warnLogSpy).toHaveBeenCalledWith(expectedWarning, expect.any(String)); | ||
| expect(toastSpy).toHaveBeenCalled(); | ||
| } else { | ||
| expect(warnLogSpy).not.toHaveBeenCalled(); | ||
| expect(toastSpy).not.toHaveBeenCalled(); | ||
| } | ||
| }; | ||
|
|
||
| it.each([ | ||
| // Safari on iOS | ||
| "Mozilla/5.0 (iPhone; CPU iPhone OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1", | ||
| // Firefox on iOS | ||
| "Mozilla/5.0 (iPhone; CPU iPhone OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/128.0 Mobile/15E148 Safari/605.1.15", | ||
| // Opera on Samsung | ||
| "Mozilla/5.0 (Linux; Android 10; SM-G970F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.6533.64 Mobile Safari/537.36 OPR/76.2.4027.73374", | ||
| ])("should warn for mobile browsers", testUserAgentFactory("Browser unsupported, unsupported device type")); | ||
|
|
||
| it.each([ | ||
| // Chrome on Chrome OS | ||
| "Mozilla/5.0 (X11; CrOS x86_64 15633.69.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.6045.212 Safari/537.36", | ||
| // Opera on Windows | ||
| "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 OPR/113.0.0.0", | ||
| // Vivaldi on Linux | ||
| "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 Vivaldi/6.8.3381.48", | ||
| // IE11 on Windows 10 | ||
| "Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko", | ||
| // Firefox 115 on macOS | ||
| "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_4_5; rv:115.0) Gecko/20000101 Firefox/115.0", | ||
| ])( | ||
| "should warn for unsupported desktop browsers", | ||
| testUserAgentFactory("Browser unsupported, unsupported user agent"), | ||
| ); | ||
|
|
||
| it.each([ | ||
| // Safari 17.5 on macOS Sonoma | ||
| "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15", | ||
| // Firefox 127 on macOS Sonoma | ||
| "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:127.0) Gecko/20100101 Firefox/127.0", | ||
| // Edge 126 on Windows | ||
| "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 Edg/126.0.2592.113", | ||
| // Edge 126 on macOS | ||
| "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 Edg/126.0.2592.113", | ||
| // Firefox 128 on Windows | ||
| "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0", | ||
| // Firefox 128 on Linux | ||
| "Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0", | ||
| // Chrome 127 on Windows | ||
| "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36", | ||
| ])("should not warn for supported browsers", testUserAgentFactory()); | ||
|
|
||
| it.each([ | ||
| // Element Nightly on macOS | ||
| "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) ElementNightly/2024072501 Chrome/126.0.6478.127 Electron/31.2.1 Safari/537.36", | ||
| ])("should not warn for Element Desktop", testUserAgentFactory()); | ||
|
|
||
| it.each(["AppleTV11,1/11.1"])( | ||
| "should handle unknown user agent sanely", | ||
| testUserAgentFactory("Browser unsupported, unknown client"), | ||
| ); | ||
|
|
||
| it("should not warn for unsupported browser if user accepted already", async () => { | ||
| const toastSpy = jest.spyOn(ToastStore.sharedInstance(), "addOrReplaceToast"); | ||
| const warnLogSpy = jest.spyOn(logger, "warn"); | ||
| const userAgent = | ||
| "Mozilla/5.0 (X11; CrOS x86_64 15633.69.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.6045.212 Safari/537.36"; | ||
| Object.defineProperty(window, "navigator", { value: { userAgent: userAgent }, writable: true }); | ||
|
|
||
| checkBrowserSupport(); | ||
| expect(warnLogSpy).toHaveBeenCalledWith("Browser unsupported, unsupported user agent", expect.any(String)); | ||
| expect(toastSpy).toHaveBeenCalledWith( | ||
| expect.objectContaining({ | ||
| component: GenericToast, | ||
| title: "Element does not support this browser", | ||
| }), | ||
| ); | ||
|
|
||
| localStorage.setItem(LOCAL_STORAGE_KEY, String(true)); | ||
| toastSpy.mockClear(); | ||
| warnLogSpy.mockClear(); | ||
|
|
||
| checkBrowserSupport(); | ||
| expect(warnLogSpy).toHaveBeenCalledWith("Browser unsupported, but user has previously accepted"); | ||
| expect(toastSpy).not.toHaveBeenCalled(); | ||
| }); | ||
| }); |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These are both transitive dependencies of
browserslistand forcing resolution de-duplicates them in the bundle