feat: adapt to FireFox

package.json

@@ -8,6 +8,7 @@
   "private": true,
   "scripts": {
     "start": "webpack --watch",
+    "debug-firefox": "web-ext run -s dist",
     "postversion": "node scripts/version.js && npm run roll",
     "build": "NODE_ENV=production webpack",
     "analyse-bundle": "ANALYSE= NODE_ENV=production webpack",
@@ -57,6 +58,7 @@
     "typescript": "^3.6.3",
     "uglifyjs-webpack-plugin": "^2.1.2",
     "url-loader": "^1.1.2",
+    "web-ext": "^3.2.0",
     "webpack": "^4.29.6",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.1.2"

src/analytics.ts

@@ -1,16 +1,22 @@
 import * as Sentry from '@sentry/browser'
 import { Middleware } from 'driver/connect.js'
-import { IN_PRODUCTION_MODE } from 'env'
+import { IN_PRODUCTION_MODE, PLATFORM } from 'env'
 import { version } from '../package.json'
 
 const PUBLIC_KEY = 'd22ec5c9cc874539a51c78388c12e3b0'
 const PROJECT_ID = '1406497'
 
-Sentry.init({
+const sentryOptions: Sentry.BrowserOptions = {
   dsn: `https://${PUBLIC_KEY}@sentry.io/${PROJECT_ID}`,
   release: `v${version}`,
   environment: IN_PRODUCTION_MODE ? 'production' : 'development',
-})
+}
+if (PLATFORM !== 'chrome') {
+  // Not safe to activate all integrations in non-Chrome environments where Gitako may not run in top context
+  // https://docs.sentry.io/platforms/javascript/#sdk-integrations
+  sentryOptions.integrations = ints => ints.filter(({ name }) => name !== 'TryCatch')
+}
+Sentry.init(sentryOptions)
 
 export function raiseError(error: Error, extra?: any) {
   return reportError(error, extra)

src/components/Gitako.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
-import SideBar from 'components/SideBar'
 import { raiseError } from 'analytics'
+import SideBar from 'components/SideBar'
+import * as React from 'react'
 
 export default class Gitako extends React.PureComponent {
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {

src/components/SizeObserver.tsx

@@ -19,7 +19,7 @@ export default function SizeObserver({ type = 'div', children, ...rest }: Props)
     height: undefined,
   })
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (features.resize) {
       const observer = new window.ResizeObserver(entries => {
         const entry = entries[0]

src/env.ts

@@ -1 +1,6 @@
 export const IN_PRODUCTION_MODE = process.env.NODE_ENV === 'production'
+
+type KnownPlatform = 'chrome' | 'firefox'
+type Platform = KnownPlatform | Exclude<string, keyof KnownPlatform>
+
+export const PLATFORM: Platform = process.env.PLATFORM || 'unknown'

src/firefox-shim.js

@@ -0,0 +1 @@
+window.requestAnimationFrame = window.requestAnimationFrame.bind(window)

src/manifest.json

@@ -12,7 +12,7 @@
   "content_scripts": [
     {
       "matches": ["https://github.com/*"],
-      "js": ["browser-polyfill.js", "content.js"]
+      "js": ["firefox-shim.js", "browser-polyfill.js", "content.js"]
     }
   ]
 }

webpack.config.js

@@ -22,6 +22,10 @@ const plugins = [
       from: 'node_modules/webextension-polyfill/dist/browser-polyfill.js',
       to: 'browser-polyfill.js',
     },
+    {
+      from: './src/firefox-shim.js',
+      to: 'firefox-shim.js',
+    },
   ]),
   new ForkTsCheckerWebpackPlugin(),
   new Dotenv(),