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 })
+    chrome.storage.local.set({
+      locationBrowserDefault: !browserDefault,
+    })
+    setBrowserDefault(!browserDefault)
+  }
 
-    if (e.target.value === 'default') {
-      setTimezone('')
-      setLocale('')
-      setLatitude('')
-      setLongitude('')
-      chrome.storage.local.set({
-        timezone: '',
-        locale: '',
-        lat: '',
-        lon: '',
-      })
-    } else if (e.target.value === 'matchIp') {
+  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)
-        chrome.storage.local.set({
-          timezone: configurations[configuration].timezone,
-          locale: configurations[configuration].locale,
-          lat: configurations[configuration].lat,
-          lon: configurations[configuration].lon,
-        })
-      }
-    }
-  }
-
-  const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
-    detachDebugger()
-    setConfiguration(e.target.value)
-    chrome.storage.local.set({
-      configuration: e.target.value,
-    })
-    if (e.target.value !== 'custom') {
+      setTimezone('')
+      setLocale('')
+      setLatitude('')
+      setLongitude('')
+      chrome.storage.local.set({
+        timezone: '',
+        locale: '',
+        lat: '',
+        lon: '',
+      })
+    } 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,54 +193,55 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
             }}
           />
         </Flex>
-      )}
-      {locationType === 'custom' && (
-        <>
-          <Label htmlFor="configuration">Configuration</Label>
-          <Select
-            name="configuration"
-            value={configuration}
-            onChange={changeConfiguration}
-            mb={'8px'}
-          >
-            <option value="custom">Custom</option>
+        <Label htmlFor="configuration">Configuration</Label>
+        <Select
+          name="configuration"
+          value={configuration}
+          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>
             ))}
-          </Select>
-        </>
-      )}
-      <DebouncedInput
-        name="timezone"
-        title="Timezone"
-        value={timezone}
-        setValue={setTimezone}
-        onChange={changeInputText}
-      />
-      <DebouncedInput
-        name="locale"
-        title="Locale"
-        value={locale}
-        setValue={setLocale}
-        onChange={changeInputText}
-      />
-      <DebouncedInput
-        name="lat"
-        title="Latitude"
-        value={lat}
-        setValue={setLatitude}
-        onChange={changeInputText}
-      />
-      <DebouncedInput
-        name="lon"
-        title="Longitude"
-        value={lon}
-        setValue={setLongitude}
-        onChange={changeInputText}
-        mb="12px"
-      />
+          </optgroup>
+        </Select>
+        <DebouncedInput
+          name="timezone"
+          title="Timezone"
+          value={timezone}
+          setValue={setTimezone}
+          onChange={changeInputText}
+        />
+        <DebouncedInput
+          name="locale"
+          title="Locale"
+          value={locale}
+          setValue={setLocale}
+          onChange={changeInputText}
+        />
+        <Flex sx={{ gap: '12px' }}>
+          <DebouncedInput
+            name="lat"
+            title="Latitude"
+            value={lat}
+            setValue={setLatitude}
+            onChange={changeInputText}
+          />
+          <DebouncedInput
+            name="lon"
+            title="Longitude"
+            value={lon}
+            setValue={setLongitude}
+            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()
-    }
-
+    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,54 +22,56 @@ 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.timezone) {
-              chrome.debugger.sendCommand(
-                { tabId: tabId },
-                'Emulation.setTimezoneOverride',
-                {
-                  timezoneId: storage.timezone,
-                },
-                () => {
-                  if (
-                    chrome.runtime.lastError &&
-                    chrome.runtime.lastError.message?.includes(
-                      'Timezone override is already in effect'
-                    )
-                  ) {
-                    chrome.debugger.detach({ tabId })
+            if (!storage.locationBrowserDefault) {
+              if (storage.timezone) {
+                chrome.debugger.sendCommand(
+                  { tabId: tabId },
+                  'Emulation.setTimezoneOverride',
+                  {
+                    timezoneId: storage.timezone,
+                  },
+                  () => {
+                    if (
+                      chrome.runtime.lastError &&
+                      chrome.runtime.lastError.message?.includes(
+                        'Timezone override is already in effect'
+                      )
+                    ) {
+                      chrome.debugger.detach({ tabId })
+                    }
                   }
-                }
-              )
-            }
+                )
+              }
 
-            if (storage.locale) {
-              chrome.debugger.sendCommand(
-                { tabId: tabId },
-                'Emulation.setLocaleOverride',
-                {
-                  locale: storage.locale,
-                }
-              )
-            }
+              if (storage.locale) {
+                chrome.debugger.sendCommand(
+                  { tabId: tabId },
+                  'Emulation.setLocaleOverride',
+                  {
+                    locale: storage.locale,
+                  }
+                )
+              }
 
-            if (storage.lat || storage.lon) {
-              chrome.debugger.sendCommand(
-                { tabId: tabId },
-                'Emulation.setGeolocationOverride',
-                {
-                  latitude: storage.lat
-                    ? parseFloat(storage.lat)
-                    : storage.ipData.lat,
-                  longitude: storage.lon
-                    ? parseFloat(storage.lon)
-                    : storage.ipData.lon,
-                  accuracy: 1,
-                }
-              )
+              if (storage.lat || storage.lon) {
+                chrome.debugger.sendCommand(
+                  { tabId: tabId },
+                  'Emulation.setGeolocationOverride',
+                  {
+                    latitude: storage.lat
+                      ? parseFloat(storage.lat)
+                      : storage.ipData.lat,
+                    longitude: storage.lon
+                      ? parseFloat(storage.lon)
+                      : storage.ipData.lon,
+                    accuracy: 1,
+                  }
+                )
+              }
             }
 
             if (