user agent age update

vytal-io · Dec 25, 2022 · 2ab3089 · 2ab3089
1 parent fcabda8
commit 2ab3089
Show file tree

Hide file tree

Showing 5 changed files with 473 additions and 193 deletions.
diff --git a/src/Popup/Components/CheckBox.tsx b/src/Popup/Components/CheckBox.tsx
@@ -9,7 +9,7 @@ interface CheckBoxProps {
 
 const CheckBox = ({ title, onChange, checked }: CheckBoxProps) => {
   return (
-    <Label sx={{ mb: '8px' }}>
+    <Label sx={{ mb: '8px', cursor: 'pointer' }}>
       <Checkbox onChange={onChange} checked={checked} />
       {title}
     </Label>

diff --git a/src/Popup/Pages/UserAgentPage/index.tsx b/src/Popup/Pages/UserAgentPage/index.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, ChangeEvent } from 'react'
-import { Box, Label, Radio, Flex, Select } from 'theme-ui'
+import { Box, Label, Select } from 'theme-ui'
+import Checkbox from '../../Components/CheckBox'
 import DebouncedInput from '../../Components/DebouncedInput'
 import userAgents from '../../../utils/userAgents'
 import detachDebugger from '../../../utils/detachDebugger'
@@ -10,77 +11,56 @@ interface UserAgentPageProps {
 }
 
 const UserAgentPage = ({ tab }: UserAgentPageProps) => {
-  const [userAgentType, setUserAgentType] = useState('default')
-  const [operatingSystem, setOperatingSystem] = useState('Windows')
-  const [browser, setBrowser] = useState('Chrome')
+  const [browserDefault, setBrowserDefault] = useState(true)
+  const [userAgentInfo, setUserAgentInfo] = useState('')
   const [userAgent, setUserAgent] = useState('')
   const [platform, setPlatform] = useState('')
 
   useEffect(() => {
     chrome.storage.local.get(
-      ['userAgentType', 'operatingSystem', 'browser', 'userAgent', 'platform'],
+      ['userAgentBrowserDefault', 'userAgentInfo', 'userAgent', 'platform'],
       (storage) => {
-        storage.userAgentType && setUserAgentType(storage.userAgentType)
-        storage.operatingSystem && setOperatingSystem(storage.operatingSystem)
-        storage.browser && setBrowser(storage.browser)
+        storage.userAgentBrowserDefault !== undefined &&
+          setBrowserDefault(storage.userAgentBrowserDefault)
+        storage.userAgentInfo && setUserAgentInfo(storage.userAgentInfo)
         storage.userAgent && setUserAgent(storage.userAgent)
         storage.platform && setPlatform(storage.platform)
       }
     )
   }, [])
 
-  const changeType = (e: ChangeEvent<HTMLInputElement>) => {
-    detachDebugger()
-    setUserAgentType(e.target.value)
-    chrome.storage.local.set({ userAgentType: e.target.value })
-
-    if (e.target.value === 'default') {
-      setUserAgent('')
-      setPlatform('')
-      chrome.storage.local.set({
-        userAgent: '',
-        platform: '',
-      })
-    } else if (e.target.value === 'preloaded') {
-      setUserAgent(userAgents[operatingSystem]['userAgents'][browser])
-      setPlatform(userAgents[operatingSystem]['platform'])
-      chrome.storage.local.set({
-        userAgent: userAgents[operatingSystem]['userAgents'][browser],
-        platform: userAgents[operatingSystem]['platform'],
-      })
+  const changeBrowserDefault = () => {
+    if (!browserDefault) {
+      detachDebugger()
     }
-  }
 
-  const changeOperatingSystem = async (e: ChangeEvent<HTMLSelectElement>) => {
-    detachDebugger()
-    setOperatingSystem(e.target.value)
-    let browserValue = browser
-    if (!userAgents[e.target.value]['userAgents'][browser]) {
-      browserValue = Object.keys(userAgents[e.target.value]['userAgents'])[0]
-      setBrowser(browserValue)
-    }
-    setUserAgent(userAgents[e.target.value]['userAgents'][browserValue])
-    setPlatform(userAgents[e.target.value]['platform'])
     chrome.storage.local.set({
-      userAgent: userAgents[e.target.value]['userAgents'][browserValue],
-      platform: userAgents[e.target.value]['platform'],
-      operatingSystem: e.target.value,
+      userAgentBrowserDefault: !browserDefault,
     })
+    setBrowserDefault(!browserDefault)
   }
 
-  const changeBrowser = (e: ChangeEvent<HTMLSelectElement>) => {
+  const changeUserAgentInfo = async (e: ChangeEvent<HTMLSelectElement>) => {
     detachDebugger()
-    setBrowser(e.target.value)
-    setUserAgent(userAgents[operatingSystem]['userAgents'][e.target.value])
+    setUserAgentInfo(e.target.value)
     chrome.storage.local.set({
-      userAgent: userAgents[operatingSystem]['userAgents'][e.target.value],
-      browser: e.target.value,
+      userAgentInfo: e.target.value,
     })
+
+    if (e.target.value !== 'custom') {
+      const userAgentObj = JSON.parse(e.target.value)
+      setUserAgent(userAgentObj.value)
+      setPlatform(userAgentObj.platform)
+      chrome.storage.local.set({
+        userAgent: userAgentObj.value,
+        platform: userAgentObj.platform,
+      })
+    }
   }
 
   const changeTextInput = () => {
-    if (userAgentType !== 'custom') {
-      setUserAgentType('custom')
+    if (userAgentInfo !== 'custom') {
+      setUserAgentInfo('custom')
       chrome.storage.local.set({
         userAgentType: 'custom',
       })
@@ -89,94 +69,56 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
 
   return (
     <Page isCurrentTab={tab === 'userAgent'} title={'User Agent'}>
-      <Flex
+      <Checkbox
+        title="Use browser default"
+        onChange={changeBrowserDefault}
+        checked={browserDefault}
+      />
+
+      <Box
         sx={{
-          justifyContent: 'space-between',
-          mb: '8px',
+          opacity: browserDefault ? '0.5' : '1',
+          pointerEvents: browserDefault ? 'none' : 'auto',
         }}
       >
-        <Label>
-          <Radio
-            name="userAgentType"
-            value="default"
-            onChange={changeType}
-            checked={userAgentType === 'default'}
-          />
-          Default
-        </Label>
-        <Label>
-          <Radio
-            name="userAgentType"
-            value="preloaded"
-            onChange={changeType}
-            checked={userAgentType === 'preloaded'}
-          />
-          Preloaded
-        </Label>
-        <Label>
-          <Radio
-            name="userAgentType"
-            value="custom"
-            onChange={changeType}
-            checked={userAgentType === 'custom'}
-          />
-          Custom
-        </Label>
-      </Flex>
-      {userAgentType === 'preloaded' && (
-        <Flex sx={{ gap: '16px' }}>
-          <Box sx={{ width: '100%' }}>
-            <Label htmlFor="operatingSystem">Operating System</Label>
-            <Select
-              name="operatingSystem"
-              id="operatingSystem"
-              value={operatingSystem}
-              onChange={changeOperatingSystem}
-              mb={'8px'}
-            >
-              {Object.keys(userAgents).map((key) => (
-                <option value={key} key={key}>
-                  {key}
-                </option>
-              ))}
-            </Select>
-          </Box>
-          <Box sx={{ width: '100%' }}>
-            <Label htmlFor="browser">Browser</Label>
-            <Select
-              name="browser"
-              id="browser"
-              value={browser}
-              onChange={changeBrowser}
-              mb={'8px'}
-            >
-              {Object.keys(userAgents[operatingSystem]['userAgents']).map(
-                (key) => (
-                  <option value={key} key={key}>
-                    {key}
+        <Box sx={{ width: '100%' }}>
+          <Label htmlFor="type">Type</Label>
+          <Select
+            name="type"
+            id="type"
+            value={userAgentInfo}
+            onChange={changeUserAgentInfo}
+            mb={'8px'}
+          >
+            <option value="custom">Custom</option>
+            {Object.keys(userAgents).map((key) => (
+              <optgroup key={key} label={userAgents[key].title}>
+                {userAgents[key].values.map((key: any) => (
+                  <option key={key.value} value={JSON.stringify(key)}>
+                    {key.title}
                   </option>
-                )
-              )}
-            </Select>
-          </Box>
-        </Flex>
-      )}
-      <DebouncedInput
-        name="userAgent"
-        title="User Agent"
-        value={userAgent}
-        setValue={setUserAgent}
-        onChange={changeTextInput}
-        mb="12px"
-      />
-      <DebouncedInput
-        name="platform"
-        title="Platform"
-        value={platform}
-        setValue={setPlatform}
-        onChange={changeTextInput}
-        mb="12px"
-      />
+                ))}
+              </optgroup>
+            ))}
+          </Select>
+        </Box>
+        <DebouncedInput
+          name="userAgent"
+          title="User Agent"
+          value={userAgent}
+          setValue={setUserAgent}
+          onChange={changeTextInput}
+          mb="12px"
+        />
+        <DebouncedInput
+          name="platform"
+          title="Platform"
+          value={platform}
+          setValue={setPlatform}
+          onChange={changeTextInput}
+          mb="12px"
+        />
+      </Box>
     </Page>
   )
 }

diff --git a/src/utils/attachDebugger.ts b/src/utils/attachDebugger.ts
@@ -12,6 +12,7 @@ const attachDebugger = (tabId: number) => {
       'localeMatchIP',
       'userAgent',
       'platform',
+      'userAgentBrowserDefault',
     ],
     (storage) => {
       if (
@@ -69,7 +70,10 @@ const attachDebugger = (tabId: number) => {
               )
             }
 
-            if (storage.userAgent || storage.platform) {
+            if (
+              !storage.userAgentBrowserDefault &&
+              (storage.userAgent || storage.platform)
+            ) {
               chrome.debugger.sendCommand(
                 { tabId: tabId },
                 'Emulation.setUserAgentOverride',