Added component for profile select

src/pages/Background/index.js

@@ -24,11 +24,6 @@ const attachTab = (tabId) => {
       ) {
         chrome.debugger.attach({ tabId: tabId }, '1.3', () => {
           if (!chrome.runtime.lastError) {
-            // chrome.debugger.sendCommand(
-            //   { tabId: tabId },
-            //   'Emulation.clearTimezoneOverride'
-            // )
-
             if (result.timezone) {
               chrome.debugger.sendCommand(
                 { tabId: tabId },

src/pages/Popup/DebugSettings.js

@@ -45,14 +45,10 @@ const DebugSettings = ({ type, title, ip, profile, setProfile }) => {
         value={value}
         onChange={changeTextValue}
         style={{
-          width: '200px',
+          width: '206px',
         }}
       />
       <label>{title}</label>
-      {/* <label>
-        <input type="checkbox" checked={matchIP} onChange={toggleMatchIP} />
-        Match IP
-      </label> */}
     </div>
   )
 }

src/pages/Popup/Popup.jsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react'
 import Navbar from './Navbar'
 import IpSettings from './IpSettings'
+import ProfileSelect from './ProfileSelect'
 import DebugSettings from './DebugSettings'
-import detachDebugger from '../../utils/detachDebugger'
 import UserAgentSettings from './UserAgentSettings'
 
 const getIP = () =>
@@ -28,14 +28,6 @@ const Popup = () => {
     })
   }, [])
 
-  const changeProfile = (e) => {
-    detachDebugger()
-    chrome.storage.sync.set({
-      profile: e.target.value,
-    })
-    setProfile(e.target.value)
-  }
-
   return (
     <div className="App">
       <Navbar />
@@ -45,60 +37,7 @@ const Popup = () => {
         }}
       >
         <IpSettings ip={ip} getIP={getIP} setIP={setIP} />
-        <div
+        <ProfileSelect profile={profile} setProfile={setProfile} />
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            margin: '12px 0 0 0',
-          }}
-        >
-          <select
-            name="profile"
-            id="profile"
-            value={profile}
-            onChange={changeProfile}
-            style={{
-              width: '208px',
-            }}
-          >
-            <option value="none">None</option>
-            <option value="match">Match IP</option>
-            <option value="custom">Custom</option>
-            <optgroup label="Locations">
-              <option value="baghdad">Baghdad</option>
-              <option value="bangkok">Bangkok</option>
-              <option value="berlin">Berlin</option>
-              <option value="cairo">Cairo</option>
-              <option value="delhi">Delhi</option>
-              <option value="dubai">Dubai</option>
-              <option value="hongKong">Hong Kong</option>
-              <option value="houston">Houston</option>
-              <option value="istanbul">Istanbul</option>
-              <option value="jerusalem">Jerusalem</option>
-              <option value="kyiv">Kyiv</option>
-              <option value="lagos">Lagos</option>
-              <option value="london">London</option>
-              <option value="mecca">Mecca</option>
-              <option value="mexicoCity">Mexico City</option>
-              <option value="moscow">Moscow</option>
-              <option value="mumbai">Mumbai</option>
-              <option value="newYork">New York</option>
-              <option value="paris">Paris</option>
-              <option value="rome">Rome</option>
-              <option value="sanFrancisco">San Francisco</option>
-              <option value="saoPaulo">São Paulo</option>
-              <option value="seoul">Seoul</option>
-              <option value="shanghai">Shanghai</option>
-              <option value="singapore">Singapore</option>
-              <option value="sydney">Sydney</option>
-              <option value="tehran">Tehran</option>
-              <option value="tokyo">Tokyo</option>
-              <option value="toronto">Toronto</option>
-            </optgroup>
-          </select>
-          <label>Profile</label>
-        </div>
-
         <DebugSettings
           type="timezone"
           title="Timezone"

src/pages/Popup/ProfileSelect.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import detachDebugger from '../../utils/detachDebugger'
+
+const ProfileSelect = ({ profile, setProfile }) => {
+  
+  const changeProfile = (e) => {
+    detachDebugger()
+    chrome.storage.sync.set({
+      profile: e.target.value,
+    })
+    setProfile(e.target.value)
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        margin: '12px 0 0 0',
+      }}
+    >
+      <select
+        name="profile"
+        id="profile"
+        value={profile}
+        onChange={changeProfile}
+        style={{
+          width: '208px',
+        }}
+      >
+        <option value="none">None</option>
+        <option value="match">Match IP</option>
+        <option value="custom">Custom</option>
+        <optgroup label="Locations">
+          <option value="baghdad">Baghdad</option>
+          <option value="bangkok">Bangkok</option>
+          <option value="berlin">Berlin</option>
+          <option value="cairo">Cairo</option>
+          <option value="delhi">Delhi</option>
+          <option value="dubai">Dubai</option>
+          <option value="hongKong">Hong Kong</option>
+          <option value="houston">Houston</option>
+          <option value="istanbul">Istanbul</option>
+          <option value="jerusalem">Jerusalem</option>
+          <option value="kyiv">Kyiv</option>
+          <option value="lagos">Lagos</option>
+          <option value="london">London</option>
+          <option value="mecca">Mecca</option>
+          <option value="mexicoCity">Mexico City</option>
+          <option value="moscow">Moscow</option>
+          <option value="mumbai">Mumbai</option>
+          <option value="newYork">New York</option>
+          <option value="paris">Paris</option>
+          <option value="rome">Rome</option>
+          <option value="sanFrancisco">San Francisco</option>
+          <option value="saoPaulo">São Paulo</option>
+          <option value="seoul">Seoul</option>
+          <option value="shanghai">Shanghai</option>
+          <option value="singapore">Singapore</option>
+          <option value="sydney">Sydney</option>
+          <option value="tehran">Tehran</option>
+          <option value="tokyo">Tokyo</option>
+          <option value="toronto">Toronto</option>
+        </optgroup>
+      </select>
+      <label>Profile</label>
+    </div>
+  )
+}
+
+export default ProfileSelect

src/pages/Popup/UserAgentSettings.js

@@ -85,11 +85,11 @@ const UserAgentSettings = () => {
         </label>
         <label>
           <input
-            type="text"
+            type="number"
             value={interval}
             onChange={changeInterval}
             style={{
-              width: '24px',
+              width: '30px',
               margin: '0 4px 0 0',
             }}
           />