From dad0286aeba9b30ab9d7ee3eda6c4b4a56ffc8ef Mon Sep 17 00:00:00 2001
From: Marcin Rataj <lidel@lidel.org>
Date: Fri, 15 Jun 2018 13:38:35 +0200
Subject: [PATCH] fix: faded diagnostics in inactive state

https://github.com/ipfs-shipyard/ipfs-companion/pull/500#issuecomment-397577842
---
 add-on/_locales/en/messages.json              |  4 ++++
 .../popup/browser-action/gateway-status.js    | 12 ++++++------
 add-on/src/popup/browser-action/header.js     |  2 +-
 add-on/src/popup/browser-action/store.js      | 19 ++++++++++++-------
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/add-on/_locales/en/messages.json b/add-on/_locales/en/messages.json
index aff9a7003..190eb743e 100644
--- 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
index e25fecd44..611699556 100644
--- a/add-on/src/popup/browser-action/gateway-status.js
+++ b/add-on/src/popup/browser-action/gateway-status.js
@@ -6,7 +6,6 @@ const html = require('choo/html')
 
 module.exports = function gatewayStatus ({
   ipfsApiUrl,
-  publicGatewayUrl,
   gatewayAddress,
   gatewayVersion,
   swarmPeers,
@@ -14,24 +13,25 @@ module.exports = function gatewayStatus ({
   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
index affba1c72..dd0d8d37d 100644
--- 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
index 397f7d137..a665aeb05 100644
--- 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