Restructured location page

src/Popup/Components/DebouncedInput.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, ChangeEvent, useMemo } from 'react'
-import { Label, Input } from 'theme-ui'
+import { Label, Input, Box } from 'theme-ui'
 import detachDebugger from '../../utils/detachDebugger'
 import debounce from 'lodash.debounce'
 
@@ -36,10 +36,10 @@ const DebouncedInput = ({
   }
 
   return (
-    <>
+    <Box>
       <Label htmlFor={name}>{title}</Label>
       <Input name={name} value={value} onChange={changeInputText} mb={mb} />
-    </>
+    </Box>
   )
 }
 

src/Popup/Pages/LocationPage/index.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, ChangeEvent, useCallback } from 'react'
 import { Box, Button, Flex, Label, Radio, Select } from 'theme-ui'
 import Page from '../../Components/Page'
+import Checkbox from '../../Components/CheckBox'
 import DebouncedInput from '../../Components/DebouncedInput'
 import detachDebugger from '../../../utils/detachDebugger'
 import countryLocales from '../../../utils/countryLocales'
@@ -15,9 +16,9 @@ interface LocationPageProps {
 }
 
 const LocationPage = ({ tab, setTab }: LocationPageProps) => {
+  const [browserDefault, setBrowserDefault] = useState(true)
   const [ipData, setIpData] = useState<ipData>()
   const [ipInfo, setIpInfo] = useState('loading...')
-  const [locationType, setLocationType] = useState('')
   const [timezone, setTimezone] = useState('')
   const [locale, setLocale] = useState('')
   const [lat, setLatitude] = useState('')
@@ -42,9 +43,19 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
 
   useEffect(() => {
     chrome.storage.local.get(
-      ['locationType', 'configuration', 'timezone', 'locale', 'lat', 'lon'],
+      [
+        'locationBrowserDefault',
+        'configuration',
+        'timezone',
+        'locale',
+        'lat',
+        'lon',
+      ],
       (storage) => {
-        if (storage.locationType === 'matchIp' && ipData) {
+        storage.configuration && setConfiguration(storage.configuration)
+        storage.locationBrowserDefault !== undefined &&
+          setBrowserDefault(storage.locationBrowserDefault)
+        if (storage.configuration === 'matchIp' && ipData) {
           setTimezone(ipData.timezone)
           setLocale(countryLocales[ipData.countryCode].locale)
           setLatitude(`${ipData.lat}`)
@@ -55,37 +66,31 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
             lat: ipData.lat,
             lon: ipData.lon,
           })
-        } else if (storage.locationType === 'custom') {
-          storage.configuration && setConfiguration(storage.configuration)
+        } else {
           storage.timezone && setTimezone(storage.timezone)
           storage.locale && setLocale(storage.locale)
           storage.lat && setLatitude(storage.lat)
           storage.lon && setLongitude(storage.lon)
         }
-        storage.locationType
-          ? setLocationType(storage.locationType)
-          : setLocationType('default')
       }
     )
   }, [ipData])
 
-  const changeType = (e: ChangeEvent<HTMLInputElement>) => {
+  const changeBrowserDefault = () => {
     detachDebugger()
-    setLocationType(e.target.value)
-    chrome.storage.local.set({ locationType: e.target.value })
-
-    if (e.target.value === 'default') {
-      setTimezone('')
-      setLocale('')
-      setLatitude('')
-      setLongitude('')
     chrome.storage.local.set({
-        timezone: '',
-        locale: '',
-        lat: '',
-        lon: '',
+      locationBrowserDefault: !browserDefault,
     })
-    } else if (e.target.value === 'matchIp') {
+    setBrowserDefault(!browserDefault)
+  }
+
+  const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
+    detachDebugger()
+    setConfiguration(e.target.value)
+    chrome.storage.local.set({
+      configuration: e.target.value,
+    })
+    if (e.target.value === 'matchIp') {
       if (ipData) {
         setTimezone(ipData.timezone)
         setLocale(countryLocales[ipData.countryCode].locale)
@@ -99,28 +104,17 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
         })
       }
     } else if (e.target.value === 'custom') {
-      if (configuration !== 'custom') {
-        setTimezone(configurations[configuration].timezone)
-        setLocale(configurations[configuration].locale)
-        setLatitude(configurations[configuration].lat)
-        setLongitude(configurations[configuration].lon)
+      setTimezone('')
+      setLocale('')
+      setLatitude('')
+      setLongitude('')
       chrome.storage.local.set({
-          timezone: configurations[configuration].timezone,
-          locale: configurations[configuration].locale,
-          lat: configurations[configuration].lat,
-          lon: configurations[configuration].lon,
+        timezone: '',
+        locale: '',
+        lat: '',
+        lon: '',
       })
-      }
-    }
-  }
-
-  const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
-    detachDebugger()
-    setConfiguration(e.target.value)
-    chrome.storage.local.set({
-      configuration: e.target.value,
-    })
-    if (e.target.value !== 'custom') {
+    } else {
       setTimezone(configurations[e.target.value].timezone)
       setLocale(configurations[e.target.value].locale)
       setLatitude(configurations[e.target.value].lat)
@@ -135,12 +129,10 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
   }
 
   const changeInputText = () => {
-    if (locationType !== 'custom' || configuration !== 'custom') {
+    if (configuration !== 'custom') {
       setConfiguration('custom')
-      setLocationType('custom')
       chrome.storage.local.set({
         configuration: 'custom',
-        locationType: 'custom',
       })
     }
   }
@@ -155,41 +147,17 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
 
   return (
     <Page isCurrentTab={tab === 'location'} title={'Location Data'}>
-      <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 sx={{ cursor: 'pointer' }}>
-          <Radio
-            name="locationType"
-            value="default"
-            onChange={changeType}
-            checked={locationType === 'default'}
-          />
-          Default
-        </Label>
-        <Label sx={{ cursor: 'pointer' }}>
-          <Radio
-            name="locationType"
-            value="matchIp"
-            onChange={changeType}
-            checked={locationType === 'matchIp'}
-          />
-          Match IP
-        </Label>
-        <Label sx={{ cursor: 'pointer' }}>
-          <Radio
-            name="locationType"
-            value="custom"
-            onChange={changeType}
-            checked={locationType === 'custom'}
-          />
-          Custom
-        </Label>
-      </Flex>
-      {locationType === 'matchIp' && (
         <Flex
           sx={{
             border: '1px solid',
@@ -225,9 +193,6 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
             }}
           />
         </Flex>
-      )}
-      {locationType === 'custom' && (
-        <>
         <Label htmlFor="configuration">Configuration</Label>
         <Select
           name="configuration"
@@ -235,15 +200,16 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
           onChange={changeConfiguration}
           mb={'8px'}
         >
+          <option value="matchIp">Match IP Address</option>
           <option value="custom">Custom</option>
+          <optgroup label="Locations">
             {Object.keys(configurations).map((key) => (
               <option value={key} key={key}>
                 {configurations[key].name}
               </option>
             ))}
+          </optgroup>
         </Select>
-        </>
-      )}
         <DebouncedInput
           name="timezone"
           title="Timezone"
@@ -258,6 +224,7 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
           setValue={setLocale}
           onChange={changeInputText}
         />
+        <Flex sx={{ gap: '12px' }}>
           <DebouncedInput
             name="lat"
             title="Latitude"
@@ -273,6 +240,8 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
             onChange={changeInputText}
             mb="12px"
           />
+        </Flex>
+      </Box>
       <Box
         sx={{
           color: 'text',

src/Popup/Pages/UserAgentPage/index.tsx

@@ -30,10 +30,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
   }, [])
 
   const changeBrowserDefault = () => {
-    if (!browserDefault) {
     detachDebugger()
-    }
-
     chrome.storage.local.set({
       userAgentBrowserDefault: !browserDefault,
     })
@@ -74,7 +71,6 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
         onChange={changeBrowserDefault}
         checked={browserDefault}
       />
-
       <Box
         sx={{
           opacity: browserDefault ? '0.5' : '1',

src/utils/attachDebugger.ts

@@ -12,6 +12,7 @@ const attachDebugger = (tabId: number) => {
       'localeMatchIP',
       'userAgent',
       'platform',
+      'locationBrowserDefault',
       'userAgentBrowserDefault',
     ],
     (storage) => {
@@ -21,10 +22,11 @@ const attachDebugger = (tabId: number) => {
           storage.lon ||
           storage.locale ||
           storage.userAgent) &&
-        !storage.userAgentBrowserDefault
+        (!storage.locationBrowserDefault || !storage.userAgentBrowserDefault)
       ) {
         chrome.debugger.attach({ tabId: tabId }, '1.3', () => {
           if (!chrome.runtime.lastError) {
+            if (!storage.locationBrowserDefault) {
               if (storage.timezone) {
                 chrome.debugger.sendCommand(
                   { tabId: tabId },
@@ -70,6 +72,7 @@ const attachDebugger = (tabId: number) => {
                   }
                 )
               }
+            }
 
             if (
               !storage.userAgentBrowserDefault &&