fix: faded diagnostics in inactive state

#500 (comment)
ipfs · Jun 15, 2018 · dad0286 · dad0286
1 parent 9f67a30
commit dad0286
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 14 deletions.
diff --git a/add-on/_locales/en/messages.json b/add-on/_locales/en/messages.json
@@ -23,6 +23,10 @@
     "message": "Disabled gateway redirect and all active API integrations",
     "description": "Label for an external IPFS node (panel_headerOffLabelTitle)"
   },
+  "panel_statusOffline": {
+    "message": "offline",
+    "description": "A label in Node status section of Browser Action pop-up (panel_statusOffline)"
+  },
   "panel_statusGatewayAddress": {
     "message": "Gateway",
     "description": "A label in Node status section of Browser Action pop-up (panel_statusGatewayAddress)"

diff --git a/add-on/src/popup/browser-action/gateway-status.js b/add-on/src/popup/browser-action/gateway-status.js
@@ -6,32 +6,32 @@ const html = require('choo/html')
 
 module.exports = function gatewayStatus ({
   ipfsApiUrl,
-  publicGatewayUrl,
   gatewayAddress,
   gatewayVersion,
   swarmPeers,
   isIpfsOnline,
   ipfsNodeType,
   redirectEnabled
 }) {
-  const api = ipfsNodeType === 'embedded' ? 'js-ipfs' : ipfsApiUrl
+  const api = ipfsApiUrl && ipfsNodeType === 'embedded' ? 'js-ipfs' : ipfsApiUrl
+  const offline = browser.i18n.getMessage('panel_statusOffline')
   return html`
     <ul class="fade-in list mv0 pv2 ph3 white">
       <li class="flex mb1">
         <span class="w-40 f7 ttu no-user-select">${browser.i18n.getMessage('panel_statusGatewayAddress')}</span>
-        <span class="w-60 f7 tr monospace truncate force-select-all" title="${gatewayAddress}">${gatewayAddress == null ? 'unknown' : gatewayAddress}</span>
+        <span class="w-60 f7 tr monospace truncate force-select-all" title="${gatewayAddress || offline}">${gatewayAddress || offline}</span>
       </li>
       <li class="flex mb1">
         <span class="w-40 f7 ttu no-user-select">${browser.i18n.getMessage('panel_statusApiAddress')}</span>
-        <span class="w-60 f7 tr monospace truncate force-select-all" title="${api}">${api}</span>
+        <span class="w-60 f7 tr monospace truncate force-select-all" title="${api || offline}">${api || offline}</span>
       </li>
       <li class="flex mb1">
         <span class="w-40 f7 ttu no-user-select">${browser.i18n.getMessage('panel_statusGatewayVersion')}</span>
-        <span class="w-60 f7 tr monospace truncate force-select-all">${gatewayVersion == null ? 'offline' : gatewayVersion}</span>
+        <span class="w-60 f7 tr monospace truncate force-select-all">${gatewayVersion || offline}</span>
       </li>
       <li class="flex" title="${browser.i18n.getMessage('panel_statusSwarmPeersTitle')}">
         <span class="w-40 f7 ttu no-user-select">${browser.i18n.getMessage('panel_statusSwarmPeers')}</span>
-        <span class="w-60 f7 tr fw9 monospace truncate force-select-all">${swarmPeers == null ? 'offline' : swarmPeers}</span>
+        <span class="w-60 f7 tr ${swarmPeers ? 'fw9' : ''} monospace truncate force-select-all">${swarmPeers || offline}</span>
       </li>
     </ul>
   `

diff --git a/add-on/src/popup/browser-action/header.js b/add-on/src/popup/browser-action/header.js
@@ -38,8 +38,8 @@ module.exports = function header (props) {
             ${browser.i18n.getMessage('panel_headerOffLabel')}
           </label>
         </div>
+        ${gatewayStatus(props)}
       </div>
-      ${active ? gatewayStatus(props) : null}
     </div>
   `
 }
diff --git a/add-on/src/popup/browser-action/store.js b/add-on/src/popup/browser-action/store.js
@@ -171,6 +171,11 @@ module.exports = (state, emitter) => {
     const prev = state.active
     state.active = !prev
     if (!state.active) {
+      const options = await browser.storage.local.get()
+      state.gatewayAddress = options.publicGatewayUrl
+      state.ipfsApiUrl = null
+      state.gatewayVersion = null
+      state.swarmPeers = null
       state.isIpfsOnline = false
     }
     emitter.emit('render')
@@ -214,19 +219,19 @@ module.exports = (state, emitter) => {
     if (status) {
       const options = await browser.storage.local.get()
       state.active = status.active
-      if (options.useCustomGateway && (options.ipfsNodeType !== 'embedded')) {
+      if (state.active && options.useCustomGateway && (options.ipfsNodeType !== 'embedded')) {
         state.gatewayAddress = options.customGatewayUrl
       } else {
         state.gatewayAddress = options.publicGatewayUrl
       }
       state.ipfsNodeType = status.ipfsNodeType
-      state.ipfsApiUrl = options.ipfsApiUrl
-      state.redirectEnabled = options.useCustomGateway
+      state.redirectEnabled = state.active && options.useCustomGateway
       // Upload requires access to the background page (https://github.com/ipfs-shipyard/ipfs-companion/issues/477)
-      state.uploadEnabled = !!(await browser.runtime.getBackgroundPage())
-      state.swarmPeers = status.peerCount === -1 ? 0 : status.peerCount
-      state.isIpfsOnline = status.peerCount > -1
-      state.gatewayVersion = status.gatewayVersion ? status.gatewayVersion : null
+      state.uploadEnabled = state.active && !!(await browser.runtime.getBackgroundPage())
+      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
+      state.ipfsApiUrl = state.active ? options.ipfsApiUrl : null
     } else {
       state.ipfsNodeType = 'external'
       state.swarmPeers = null