Improve performance of proxy options page

censortracker · May 26, 2022 · 10b296e · 10b296e
1 parent bf8fa18
commit 10b296e
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 33 deletions.
diff --git a/src/chrome/js/background.js b/src/chrome/js/background.js
@@ -11,6 +11,7 @@ import {
   handleTabCreate,
   handleTabState,
 } from 'Background/handlers'
+import * as storage from 'Background/storage'
 import { getRequestFilter } from 'Background/utilities'
 
 chrome.alarms.onAlarm.addListener(handleOnAlarm)
@@ -28,3 +29,10 @@ chrome.webNavigation.onBeforeNavigate.addListener(
 
 chrome.tabs.onUpdated.addListener(handleTabState)
 chrome.tabs.onCreated.addListener(handleTabCreate)
+
+chrome.proxy.onProxyError.addListener(async ({ error, fatal }) => {
+  if (error === 'net::ERR_PROXY_CONNECTION_FAILED' && fatal) {
+    await storage.set({ proxyIsAlive: false })
+    console.error(`Proxy connection failed: ${error}`)
+  }
+})
diff --git a/src/shared/js/background/proxy.js b/src/shared/js/background/proxy.js
@@ -183,7 +183,10 @@ class ProxyManager {
   }
 
   async alive () {
-    return true
+    const { proxyIsAlive } =
+      await storage.get({ proxyIsAlive: true })
+
+    return proxyIsAlive
   }
 
   async ping () {
@@ -213,7 +216,7 @@ class ProxyManager {
 
   async enableProxy () {
     console.log('Proxying enabled.')
-    await storage.set({ useProxy: true })
+    await storage.set({ useProxy: true, proxyIsAlive: true })
   }
 
   async disableProxy () {

diff --git a/src/shared/js/pages/proxy-options.js b/src/shared/js/pages/proxy-options.js
@@ -9,19 +9,15 @@ import { isPort, translateDocument } from 'Background/utilities'
   const proxyCustomOptions = document.getElementById('proxyCustomOptions')
   const proxyHostInput = document.getElementById('proxyHostInput')
   const proxyPortInput = document.getElementById('proxyPortInput')
-  const proxyStatusIsDown = document.getElementById('proxyStatusIsDown')
+  const proxyIsDown = document.getElementById('proxyIsDown')
   const proxyOptionsInputs = document.getElementById('proxyOptionsInputs')
   const proxyCustomOptionsRadioGroup = document.getElementById('proxyCustomOptionsRadioGroup')
-  const isProxyControlledByThisExtension = await ProxyManager.controlledByThisExtension()
-  const isProxyControlledByOtherExtensions = await ProxyManager.controlledByOtherExtensions()
   const useCustomProxyRadioButton = document.getElementById('useCustomProxy')
   const useDefaultProxyRadioButton = document.getElementById('useDefaultProxy')
 
-  const proxyIsAlive = await ProxyManager.alive()
-
-  if (!proxyIsAlive) {
-    proxyStatusIsDown.hidden = false
-  }
+  ProxyManager.alive().then((alive) => {
+    proxyIsDown.hidden = alive
+  })
 
   proxyCustomOptions.hidden = !proxyingEnabled
 
@@ -33,8 +29,8 @@ import { isPort, translateDocument } from 'Background/utilities'
     useCustomProxyRadioButton.checked = true
     proxyOptionsInputs.classList.remove('hidden')
   } else {
-    proxyOptionsInputs.classList.add('hidden')
     useDefaultProxyRadioButton.checked = true
+    proxyOptionsInputs.classList.add('hidden')
   }
 
   if (customProxyHost) {
@@ -52,9 +48,12 @@ import { isPort, translateDocument } from 'Background/utilities'
 
     if ((event.ctrlKey && event.key === 's') || event.keyCode === 13) {
       if (host && isPort(port)) {
-        await storage.set({ useCustomChecked: true })
-        await storage.set({ customProxyPort: port, customProxyHost: host })
-        await storage.set({ customProxyServerURI })
+        await storage.set({
+          useCustomChecked: true,
+          customProxyPort: port,
+          customProxyHost: host,
+          customProxyServerURI,
+        })
         await ProxyManager.setProxy()
 
         proxyHostInput.classList.remove('invalid-input')
@@ -70,44 +69,51 @@ import { isPort, translateDocument } from 'Background/utilities'
 
   proxyCustomOptionsRadioGroup.addEventListener('change', async (event) => {
     if (event.target.value !== 'default') {
-      await ProxyManager.setProxy()
       proxyOptionsInputs.classList.remove('hidden')
+      await ProxyManager.setProxy()
     } else {
+      proxyOptionsInputs.classList.add('hidden')
       await ProxyManager.setProxy()
       await storage.set({ useCustomChecked: false })
       await storage.remove(['customProxyHost', 'customProxyPort', 'customProxyServerURI'])
-      proxyOptionsInputs.classList.add('hidden')
     }
   })
 
-  if (isProxyControlledByOtherExtensions) {
-    useProxyCheckbox.checked = false
-    useProxyCheckbox.disabled = true
-    await ProxyManager.disableProxy()
-  }
-
-  if (isProxyControlledByThisExtension) {
-    useProxyCheckbox.checked = true
-    useProxyCheckbox.disabled = false
+  ProxyManager.controlledByThisExtension()
+    .then(async (controlledByThisExtension) => {
+      useProxyCheckbox.checked = true
+      useProxyCheckbox.disabled = false
 
-    if (!proxyingEnabled) {
-      await ProxyManager.enableProxy()
-    }
-  }
+      if (!proxyingEnabled) {
+        await ProxyManager.enableProxy()
+      }
+    })
+
+  ProxyManager.controlledByOtherExtensions()
+    .then(async (controlledByOtherExtensions) => {
+      if (controlledByOtherExtensions) {
+        useProxyCheckbox.checked = false
+        useProxyCheckbox.disabled = true
+        await ProxyManager.disableProxy()
+      }
+    })
 
   useProxyCheckbox.addEventListener('change', async () => {
     if (useProxyCheckbox.checked) {
-      await ProxyManager.enableProxy()
       proxyCustomOptions.hidden = false
       useProxyCheckbox.checked = true
+      await ProxyManager.enableProxy()
     } else {
-      await ProxyManager.disableProxy()
       proxyCustomOptions.hidden = true
       useProxyCheckbox.checked = false
+      proxyIsDown.hidden = true
+      await ProxyManager.disableProxy()
     }
   }, false)
 
-  useProxyCheckbox.checked = await ProxyManager.isEnabled()
+  await ProxyManager.isEnabled().then((isEnabled) => {
+    useProxyCheckbox.checked = isEnabled
+  })
 
   const { countryDetails: { name: country } } = await Registry.getConfig()
 

diff --git a/src/shared/pages/proxy-options.html b/src/shared/pages/proxy-options.html
@@ -29,7 +29,7 @@
       </div>
       <div id="proxyOptionsTitle" class="main-page__title" data-i18n-key="proxySettings"></div>
 
-      <div id="proxyStatusIsDown" class="proxy__disclaimer" hidden>
+      <div id="proxyIsDown" class="proxy__disclaimer" hidden>
         <div data-i18n-key="proxyOptionsStatusTitle" class="disclaimer__title"></div>
         <div data-i18n-key="proxyOptionsStatusDesc" class="disclaimer__text"></div>
       </div>