fix: hide unavailable actions in incognito mode

This commit solves some regressions related to background page access
being denied in incognito mode.

More context:
#477
#243

add-on/src/popup/browser-action/context-actions.js

@@ -12,14 +12,14 @@ module.exports = function contextActions ({
   isUnPinning,
   isPinned,
   isIpfsOnline,
+  isApiAvailable,
   onCopyIpfsAddr,
   onCopyPublicGwAddr,
   onPin,
   onUnPin
 }) {
   if (!isIpfsContext) return null
-  const isPinningSupported = (ipfsNodeType !== 'embedded')
-
+  const showPinControls = isIpfsOnline && isApiAvailable && (ipfsNodeType !== 'embedded')
   return html`
     <div class='fade-in pv1'>
       ${navItem({
@@ -30,14 +30,14 @@ module.exports = function contextActions ({
         text: browser.i18n.getMessage('panel_copyCurrentPublicGwUrl'),
         onClick: onCopyPublicGwAddr
       })}
-      ${isIpfsOnline && isPinningSupported && !isPinned ? (
+      ${showPinControls && !isPinned ? (
         navItem({
           text: browser.i18n.getMessage('panel_pinCurrentIpfsAddress'),
           disabled: isPinning,
           onClick: onPin
         })
       ) : null}
-      ${isIpfsOnline && isPinningSupported && isPinned ? (
+      ${showPinControls && isPinned ? (
         navItem({
           text: browser.i18n.getMessage('panel_unpinCurrentIpfsAddress'),
           disabled: isUnPinning,

add-on/src/popup/browser-action/header.js

@@ -11,7 +11,7 @@ module.exports = function header (props) {
   return html`
     <div class="pt3 pb1 br2 br--top ba bw1 b--white" style="background-image: url('../../../images/stars.png'), linear-gradient(to bottom, #041727 0%,#043b55 100%); background-size: 100%; background-repeat: repeat;">
     <div class="pointer no-user-select ${active ? 'fade-in' : 'o-60'}" onclick=${onToggleActive}>
-      <div class="tc mb2 transition-all" style="${!active ? 'filter: blur( .15em )' : ''}" title="${isIpfsOnline ? '' : 'offline'}">
+      <div class="tc mb2 transition-all" style="${!active ? 'filter: blur( .15em )' : ''}" title="${isIpfsOnline ? '' : browser.i18n.getMessage('panel_statusOffline')}">
         ${logo({
           size: 52,
           path: '../../../icons',

add-on/src/popup/browser-action/operations.js

@@ -10,32 +10,28 @@ module.exports = function operations ({
   ipfsNodeType,
   isIpfsOnline,
   redirectEnabled,
-  uploadEnabled,
+  isApiAvailable,
   onQuickUpload,
   onOpenWebUi,
   onOpenPrefs,
   onToggleRedirect
 }) {
+  const showQuickUpload = isIpfsOnline && isApiAvailable
+  const showWebUI = isIpfsOnline && ipfsNodeType === 'external'
+  const showGatewaySwitch = active && ipfsNodeType === 'external'
   return html`
     <div class="fade-in pv1">
-      ${isIpfsOnline && uploadEnabled ? (
-        navItem({
-          text: browser.i18n.getMessage('panel_quickUpload'),
-          bold: true,
-          onClick: onQuickUpload
-        })
-      ) : null}
-      ${ipfsNodeType === 'external' && isIpfsOnline ? (
+      ${navItem({
+        text: browser.i18n.getMessage('panel_openPreferences'),
+        onClick: onOpenPrefs
+      })}
+      ${showWebUI ? (
         navItem({
           text: browser.i18n.getMessage('panel_openWebui'),
           onClick: onOpenWebUi
         })
       ) : null}
-      ${navItem({
-        text: browser.i18n.getMessage('panel_openPreferences'),
-        onClick: onOpenPrefs
-      })}
-      ${active && ipfsNodeType === 'external' ? (
+      ${showGatewaySwitch ? (
         navItem({
           text: browser.i18n.getMessage(
             redirectEnabled
@@ -45,6 +41,13 @@ module.exports = function operations ({
           onClick: onToggleRedirect
         })
       ) : null}
+      ${showQuickUpload ? (
+        navItem({
+          text: browser.i18n.getMessage('panel_quickUpload'),
+          bold: true,
+          onClick: onQuickUpload
+        })
+      ) : null}
     </div>
   `
 }

add-on/src/popup/browser-action/store.js

@@ -24,7 +24,7 @@ module.exports = (state, emitter) => {
     swarmPeers: null,
     gatewayVersion: null,
     redirectEnabled: false,
-    uploadEnabled: false
+    isApiAvailable: false
   })
 
   let port
@@ -189,12 +189,8 @@ module.exports = (state, emitter) => {
   })
 
   async function updatePageActionsState (status) {
-    // IPFS contexts require access to ipfs API object from background page
-    // Note: access to background page is denied in Private Browsing mode
-    const ipfs = await getIpfsApi()
-
     // Check if current page is an IPFS one
-    state.isIpfsContext = !!(ipfs && status && status.ipfsPageActionsContext)
+    state.isIpfsContext = status.ipfsPageActionsContext || false
     state.currentTab = status.currentTab || null
 
     // browser.pageAction-specific items that can be rendered earlier (snappy UI)
@@ -209,8 +205,11 @@ module.exports = (state, emitter) => {
     })
 
     if (state.isIpfsContext) {
+      // IPFS contexts require access to ipfs API object from background page
+      // Note: access to background page will be denied in Private Browsing mode
+      const ipfs = await getIpfsApi()
       // There is no point in displaying actions that require API interaction if API is down
-      const apiIsUp = status && status.peerCount >= 0
+      const apiIsUp = ipfs && status && status.peerCount >= 0
       if (apiIsUp) await updatePinnedState(ipfs, status)
     }
   }
@@ -227,7 +226,7 @@ module.exports = (state, emitter) => {
       state.ipfsNodeType = status.ipfsNodeType
       state.redirectEnabled = state.active && options.useCustomGateway
       // Upload requires access to the background page (https://github.com/ipfs-shipyard/ipfs-companion/issues/477)
-      state.uploadEnabled = state.active && !!(await browser.runtime.getBackgroundPage())
+      state.isApiAvailable = state.active && !!(await browser.runtime.getBackgroundPage()) && !browser.extension.inIncognitoContext // https://github.com/ipfs-shipyard/ipfs-companion/issues/243
       state.swarmPeers = !state.active || status.peerCount === -1 ? null : status.peerCount
       state.isIpfsOnline = state.active && status.peerCount > -1
       state.gatewayVersion = state.active && status.gatewayVersion ? status.gatewayVersion : null