feat: icon in browser action menu upon version update (#935)

Co-authored-by: Marcin Rataj <lidel@lidel.org>

add-on/_locales/en/messages.json

@@ -7,6 +7,10 @@
     "message": "IPFS Companion",
     "description": "A label for IPFS icon (panel_headerIpfsNodeIconLabel)"
   },
+  "panel_headerNewVersionTitle": {
+    "message": "IPFS Companion was updated to a new version! Click for details.",
+    "description": "A label in the Browser Action pop-up for icon appearing on first load of new version (panel_headerNewVersionTitle)"
+  },
   "panel_headerActiveToggleTitle": {
     "message": "Toggle all IPFS integrations",
     "description": "A label for an embedded IPFS node (panel_headerActiveToggleTitle)"

add-on/src/lib/ipfs-companion.js

@@ -260,6 +260,7 @@ module.exports = async function init () {
       redirect: state.redirect,
       enabledOn: state.enabledOn,
       disabledOn: state.disabledOn,
+      showUpdateIndicator: state.dismissedUpdate !== browser.runtime.getManifest().version,
       currentTab
     }
     try {
@@ -687,20 +688,7 @@ module.exports = async function init () {
           shouldReloadExtension = true
           state[key] = localStorage.debug = change.newValue
           break
-        case 'recoverFailedHttpRequests':
-        case 'importDir':
-        case 'linkify':
-        case 'catchUnhandledProtocols':
-        case 'displayNotifications':
-        case 'displayReleaseNotes':
-        case 'automaticMode':
-        case 'detectIpfsPathHeader':
-        case 'preloadAtPublicGateway':
-        case 'openViaWebUI':
-        case 'useLatestWebUI':
-        case 'enabledOn':
-        case 'disabledOn':
-        case 'dnslinkRedirect':
+        default:
           state[key] = change.newValue
           break
       }

add-on/src/lib/on-installed.js

@@ -2,6 +2,7 @@
 /* eslint-env browser */
 
 const browser = require('webextension-polyfill')
+const { version } = browser.runtime.getManifest()
 
 exports.welcomePage = '/dist/landing-pages/welcome/index.html'
 exports.updatePage = 'https://github.com/ipfs-shipyard/ipfs-companion/releases/tag/v'
@@ -16,21 +17,17 @@ exports.onInstalled = async (details) => {
 }
 
 exports.showPendingLandingPages = async () => {
-  const hint = await browser.storage.local.get([
-    'showLandingPage',
-    'displayReleaseNotes'
-  ])
-  switch (hint.showLandingPage) {
+  const { showLandingPage, displayReleaseNotes } = await browser.storage.local.get(['showLandingPage', 'displayReleaseNotes'])
+  switch (showLandingPage) {
     case 'onInstallWelcome':
       await browser.storage.local.remove('showLandingPage')
       return browser.tabs.create({
         url: exports.welcomePage
       })
     case 'onVersionUpdate':
       await browser.storage.local.remove('showLandingPage')
-      if (!hint.displayReleaseNotes) return
-      return browser.tabs.create({
-        url: exports.updatePage + browser.runtime.getManifest().version
-      })
+      if (!displayReleaseNotes) return
+      await browser.storage.local.set({ dismissedUpdate: version })
+      return browser.tabs.create({ url: exports.updatePage + version })
   }
 }

add-on/src/lib/options.js

@@ -26,14 +26,15 @@ exports.optionDefaults = Object.freeze({
   preloadAtPublicGateway: true,
   catchUnhandledProtocols: true,
   displayNotifications: true,
-  displayReleaseNotes: true,
+  displayReleaseNotes: false,
   customGatewayUrl: buildCustomGatewayUrl(),
   ipfsApiUrl: buildIpfsApiUrl(),
   ipfsApiPollMs: 3000,
   ipfsProxy: true, // window.ipfs
   logNamespaces: 'jsipfs*,ipfs*,libp2p:mdns*,libp2p-delegated*,-*:ipns*,-ipfs:preload*,-ipfs-http-client:request*,-ipfs:http-api*',
   importDir: '/ipfs-companion-imports/%Y-%M-%D_%h%m%s/',
   useLatestWebUI: false,
+  dismissedUpdate: null,
   openViaWebUI: true
 })
 
@@ -213,4 +214,12 @@ exports.migrateOptions = async (storage, debug) => {
       await storage.set({ disabledOn })
     }
   }
+
+  { // ~v2.15.1: change displayReleaseNotes opt-out flag to opt-in
+    const { displayReleaseNotes, dismissedUpdate } = await storage.get(['displayReleaseNotes', 'dismissedUpdate'])
+    if (!dismissedUpdate && displayReleaseNotes) {
+      log('converting displayReleaseNotes from out-out to opt-in')
+      await storage.set({ displayReleaseNotes: false })
+    }
+  }
 }

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

@@ -3,13 +3,14 @@
 
 const html = require('choo/html')
 const logo = require('../logo')
+const versionUpdateIcon = require('./version-update-icon')
 const powerIcon = require('./power-icon')
 const optionsIcon = require('./options-icon')
 const ipfsVersion = require('./ipfs-version')
 const gatewayStatus = require('./gateway-status')
 
 module.exports = function header (props) {
-  const { ipfsNodeType, active, onToggleActive, onOpenPrefs, isIpfsOnline, onOpenWelcomePage } = props
+  const { ipfsNodeType, active, onToggleActive, onOpenPrefs, onOpenReleaseNotes, isIpfsOnline, onOpenWelcomePage, showUpdateIndicator } = props
   return html`
     <div class="br2 br--top ba bw1 b--white ipfs-gradient-0">
       <div class="pt3 pr3 pb2 pl3 no-user-select flex justify-between items-center">
@@ -35,6 +36,11 @@ module.exports = function header (props) {
           </div>
         </div>
         <div class="tr ma0 pb1">
+          ${showUpdateIndicator ? versionUpdateIcon({
+            active,
+            title: 'panel_headerNewVersionTitle',
+            action: onOpenReleaseNotes
+          }) : null}
           ${powerIcon({
             active,
             title: 'panel_headerActiveToggleTitle',

add-on/src/popup/browser-action/options-icon.js

@@ -6,7 +6,7 @@ const icon = require('./icon')
 
 function optionsIcon ({ active, title, action, size = '1.8rem' }) {
   const svg = html`
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 86"
         class="fill-current-color"
         style="width:${size}; height:${size}">
         <path d="M74.05 50.23c-.07-3.58 1.86-5.85 5.11-7.1-.2-2-2.48-7.45-3.63-8.76-3.11 1.46-6.06 1.23-8.54-1.22s-2.72-5.46-1.26-8.64a29.24 29.24 0 0 0-8.8-3.63c-1.06 3.08-3.12 5-6.35 5.25-3.82.29-6.29-1.69-7.61-5.22a30.11 30.11 0 0 0-8.77 3.67c1.5 3.16 1.3 6.1-1.15 8.6s-5.45 2.76-8.64 1.29a29.33 29.33 0 0 0-3.58 8.79C24 44.43 25.94 46.62 26 50s-1.82 5.84-5.1 7.12a29.21 29.21 0 0 0 3.68 8.71c3.09-1.38 6-1.15 8.42 1.22s2.79 5.33 1.41 8.49a29.72 29.72 0 0 0 8.76 3.57 1.46 1.46 0 0 0 .11-.21 7.19 7.19 0 0 1 13.53-.16c.13.33.28.32.55.25a29.64 29.64 0 0 0 8-3.3 4 4 0 0 0 .37-.25c-1.27-2.86-1.15-5.57.88-7.94 2.44-2.84 5.5-3.26 8.91-1.8a29.23 29.23 0 0 0 3.65-8.7c-3.17-1.22-5.05-3.38-5.12-6.77zM50 59.54a8.57 8.57 0 1 1 8.59-8.31A8.58 8.58 0 0 1 50 59.54z"/>

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

@@ -19,11 +19,12 @@ module.exports = function browserActionPage (state, emit) {
   const onOpenWebUi = () => emit('openWebUi', '/')
   const onOpenWelcomePage = () => emit('openWelcomePage')
   const onOpenPrefs = () => emit('openPrefs')
+  const onOpenReleaseNotes = () => emit('openReleaseNotes')
   const onToggleGlobalRedirect = () => emit('toggleGlobalRedirect')
   const onToggleSiteIntegrations = () => emit('toggleSiteIntegrations')
   const onToggleActive = () => emit('toggleActive')
 
-  const headerProps = Object.assign({ onToggleActive, onOpenPrefs, onOpenWelcomePage }, state)
+  const headerProps = Object.assign({ onToggleActive, onOpenPrefs, onOpenReleaseNotes, onOpenWelcomePage }, state)
   const activeTabActionsProps = Object.assign({ onViewOnGateway, onToggleSiteIntegrations, onCopy, onPin, onUnPin }, state)
   const opsProps = Object.assign({ onQuickImport, onOpenWebUi, onToggleGlobalRedirect }, state)
 

add-on/src/popup/browser-action/power-icon.js

@@ -6,7 +6,7 @@ const icon = require('./icon')
 
 function powerIcon ({ active, title, action, size = '1.8rem' }) {
   const svg = html`
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 86"
         class="fill-current-color mr1"
         style="width:${size}; height:${size}">
         <path d="M50 20.11A29.89 29.89 0 1 0 79.89 50 29.89 29.89 0 0 0 50 20.11zm-3.22 17a3.22 3.22 0 0 1 6.44 0v6.43a3.22 3.22 0 0 1-6.44 0zM50 66.08a16.14 16.14 0 0 1-11.41-27.49 3.28 3.28 0 0 1 1.76-.65 2.48 2.48 0 0 1 2.42 2.41 2.58 2.58 0 0 1-.77 1.77A10.81 10.81 0 0 0 38.59 50a11.25 11.25 0 0 0 22.5 0 10.93 10.93 0 0 0-3.21-7.88 3.37 3.37 0 0 1-.65-1.77 2.48 2.48 0 0 1 2.42-2.41 2.16 2.16 0 0 1 1.76.65A16.14 16.14 0 0 1 50 66.08z"/>

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

@@ -155,6 +155,20 @@ module.exports = (state, emitter) => {
     }
   })
 
+  emitter.on('openReleaseNotes', async () => {
+    const { version } = browser.runtime.getManifest()
+    const url = `https://github.com/ipfs-shipyard/ipfs-companion/releases/tag/v${version}`
+    try {
+      await browser.storage.local.set({ dismissedUpdate: version })
+      // Note: opening tab needs to happen after storage.local.set because in Chromium 86
+      // it triggers a premature window.close, which aborts storage update
+      await browser.tabs.create({ url })
+      window.close()
+    } catch (error) {
+      console.error(`Unable to open release notes (${url})`, error)
+    }
+  })
+
   emitter.on('openPrefs', () => {
     browser.runtime.openOptionsPage()
       .then(() => window.close())

add-on/src/popup/browser-action/version-update-icon.js

@@ -0,0 +1,18 @@
+'use strict'
+/* eslint-env browser, webextensions */
+
+const html = require('choo/html')
+const icon = require('./icon')
+
+function versionUpdateIcon ({ active, title, action, size = '1.8rem' }) {
+  const svg = html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 86"
+        class="fill-yellow-muted mr1"
+        style="width:${size}; height:${size}">
+        <path xmlns="http://www.w3.org/2000/svg" d="M71.13 28.87a29.88 29.88 0 100 42.26 29.86 29.86 0 000-42.26zm-18.39 37.6h-5.48V44.71h5.48zm0-26.53h-5.48v-5.49h5.48z"/>
+      </svg>
+    `
+  return icon({ svg, title, active, action })
+}
+
+module.exports = versionUpdateIcon

test/functional/lib/ipfs-companion.test.js

@@ -14,6 +14,7 @@ describe('init', function () {
     global.browser = browser
     global.URL = URL
     global.screen = {}
+    browser.runtime.getManifest.returns({ version: '0.0.0' }) // on-installed.js
     init = require('../../../add-on/src/lib/ipfs-companion')
   })