feat: View on Gateway context action on IPFS pages

This adds new item to Active Tab section of menu in browser action
that enables user to open existing IPFS resource at Public or Custom
Gateway (depends on redirect status).

Author: lidel

add-on/_locales/en/messages.json

@@ -91,6 +91,10 @@
     "message": "Copy Public Gateway URL",
     "description": "A menu item in Browser Action pop-up and right-click context menu (panel_copyCurrentPublicGwUrl)"
   },
+  "panel_contextMenuViewOnGateway": {
+    "message": "View on Gateway",
+    "description": "A menu item in Browser Action pop-up and right-click context menu (panel_contextMenuViewOnGateway)"
+  },
   "pageAction_titleIpfsAtPublicGateway": {
     "message": "IPFS resource loaded via Public Gateway",
     "description": "A tooltip displayed over Page Action in location bar (pageAction_titleIpfsAtPublicGateway)"
@@ -276,7 +280,7 @@
     "description": "An option description on the Preferences screen (option_useCustomGateway_description)"
   },
   "option_dnslinkRedirect_title": {
-    "message": "Force load from Custom Gateway",
+    "message": "Force page load from custom gateway",
     "description": "An option title on the Preferences screen (option_dnslinkRedirect_title)"
   },
   "option_dnslinkRedirect_description": {

add-on/src/lib/context-menus.js

@@ -58,9 +58,11 @@ const contextMenuImportToIpfsSelection = 'contextMenu_importToIpfsSelection'
 const contextMenuCopyCanonicalAddress = 'panelCopy_currentIpfsAddress'
 const contextMenuCopyRawCid = 'panelCopy_copyRawCid'
 const contextMenuCopyAddressAtPublicGw = 'panel_copyCurrentPublicGwUrl'
+const contextMenuViewOnGateway = 'panel_contextMenuViewOnGateway'
 module.exports.contextMenuCopyCanonicalAddress = contextMenuCopyCanonicalAddress
 module.exports.contextMenuCopyRawCid = contextMenuCopyRawCid
 module.exports.contextMenuCopyAddressAtPublicGw = contextMenuCopyAddressAtPublicGw
+module.exports.contextMenuViewOnGateway = contextMenuViewOnGateway
 
 // menu items that are enabled only when API is online
 const apiMenuItems = new Set()

add-on/src/lib/inspector.js

@@ -0,0 +1,21 @@
+'use strict'
+
+const browser = require('webextension-polyfill')
+const { findValueForContext } = require('./context-menus')
+const { pathAtHttpGateway } = require('./ipfs-path')
+
+function createInspector (notify, ipfsPathValidator, getState) {
+  return {
+    async viewOnGateway (context, contextType) {
+      const url = await findValueForContext(context, contextType)
+      const ipfsPath = ipfsPathValidator.resolveToIpfsPath(url)
+      const gateway = getState().pubGwURLString
+      const gatewayUrl = pathAtHttpGateway(ipfsPath, gateway)
+      await browser.tabs.create({ url: gatewayUrl })
+    }
+    // TODO: view in WebUI's Files
+    // TODO: view in WebUI's IPLD Explorer
+  }
+}
+
+module.exports = createInspector

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

@@ -18,8 +18,9 @@ const { createIpfsUrlProtocolHandler } = require('./ipfs-protocol')
 const createIpfsImportHandler = require('./ipfs-import')
 const createNotifier = require('./notifier')
 const createCopier = require('./copier')
+const createInspector = require('./inspector')
 const { createRuntimeChecks } = require('./runtime-checks')
-const { createContextMenus, findValueForContext, contextMenuCopyAddressAtPublicGw, contextMenuCopyRawCid, contextMenuCopyCanonicalAddress } = require('./context-menus')
+const { createContextMenus, findValueForContext, contextMenuCopyAddressAtPublicGw, contextMenuCopyRawCid, contextMenuCopyCanonicalAddress, contextMenuViewOnGateway } = require('./context-menus')
 const createIpfsProxy = require('./ipfs-proxy')
 const { showPendingLandingPages } = require('./on-installed')
 
@@ -34,6 +35,7 @@ module.exports = async function init () {
   var modifyRequest
   var notify
   var copier
+  var inspector
   var runtime
   var contextMenus
   var apiStatusUpdateInterval
@@ -69,6 +71,7 @@ module.exports = async function init () {
     ipfsPathValidator = createIpfsPathValidator(getState, getIpfs, dnslinkResolver)
     ipfsImportHandler = createIpfsImportHandler(getState, getIpfs, ipfsPathValidator, runtime)
     copier = createCopier(notify, ipfsPathValidator)
+    inspector = createInspector(notify, ipfsPathValidator, getState)
     contextMenus = createContextMenus(getState, runtime, ipfsPathValidator, {
       onAddFromContext,
       onCopyCanonicalAddress: copier.copyCanonicalAddress,
@@ -212,6 +215,7 @@ module.exports = async function init () {
 
   const BrowserActionMessageHandlers = {
     notification: (message) => notify(message.title, message.message),
+    [contextMenuViewOnGateway]: inspector.viewOnGateway,
     [contextMenuCopyCanonicalAddress]: copier.copyCanonicalAddress,
     [contextMenuCopyRawCid]: copier.copyRawCid,
     [contextMenuCopyAddressAtPublicGw]: copier.copyAddressAtPublicGw

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

@@ -5,14 +5,23 @@ const browser = require('webextension-polyfill')
 const html = require('choo/html')
 const navItem = require('./nav-item')
 const navHeader = require('./nav-header')
-const { contextMenuCopyAddressAtPublicGw, contextMenuCopyRawCid, contextMenuCopyCanonicalAddress } = require('../../lib/context-menus')
+const {
+  contextMenuViewOnGateway,
+  contextMenuCopyAddressAtPublicGw,
+  contextMenuCopyRawCid,
+  contextMenuCopyCanonicalAddress
+} = require('../../lib/context-menus')
 
 // Context Actions are displayed in Browser Action and Page Action (FF only)
 function contextActions ({
   active,
   redirect,
   isRedirectContext,
+  pubGwURLString,
+  gwURLString,
+  currentTab,
   currentFqdn,
+  currentDnslinkFqdn,
   currentTabRedirectOptOut,
   ipfsNodeType,
   isIpfsContext,
@@ -22,16 +31,21 @@ function contextActions ({
   isIpfsOnline,
   isApiAvailable,
   onToggleSiteRedirect,
+  onViewOnGateway,
   onCopy,
   onPin,
   onUnPin
 }) {
   const activeCidResolver = active && isIpfsOnline && isApiAvailable
   const activePinControls = active && isIpfsOnline && isApiAvailable
-
+  const activeViewOnGateway = currentTab && !(currentTab.url.startsWith(pubGwURLString) || currentTab.url.startsWith(gwURLString))
   const renderIpfsContextItems = () => {
     if (!isIpfsContext) return
     return html`<div>
+  ${activeViewOnGateway ? navItem({
+    text: browser.i18n.getMessage(contextMenuViewOnGateway),
+    onClick: () => onViewOnGateway(contextMenuViewOnGateway)
+  }) : null}
   ${navItem({
     text: browser.i18n.getMessage(contextMenuCopyAddressAtPublicGw),
     onClick: () => onCopy(contextMenuCopyAddressAtPublicGw)
@@ -55,7 +69,7 @@ function contextActions ({
   </div>
     `
   }
-
+  // TODO: change "redirect on {fqdn}" to "disable on {fqdn}" and disable all integrations
   const renderSiteRedirectToggle = () => {
     if (!isRedirectContext) return
     return html`
@@ -69,11 +83,10 @@ function contextActions ({
   })}
       `
   }
-
   return html`
     <div class='fade-in pv1'>
-  ${renderSiteRedirectToggle()}
   ${renderIpfsContextItems()}
+  ${renderSiteRedirectToggle()}
     </div>
   `
 }

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

@@ -11,6 +11,7 @@ const tools = require('./tools')
 // Passed current app `state` from the store and `emit`, a function to create
 // events, allowing views to signal back to the store that something happened.
 module.exports = function browserActionPage (state, emit) {
+  const onViewOnGateway = () => emit('viewOnGateway')
   const onCopy = (copyAction) => emit('copy', copyAction)
   const onPin = () => emit('pin')
   const onUnPin = () => emit('unPin')
@@ -23,7 +24,7 @@ module.exports = function browserActionPage (state, emit) {
   const onToggleActive = () => emit('toggleActive')
 
   const headerProps = Object.assign({ onToggleActive, onOpenPrefs }, state)
-  const activeTabActionsProps = Object.assign({ onToggleSiteRedirect, onCopy, onPin, onUnPin }, state)
+  const activeTabActionsProps = Object.assign({ onViewOnGateway, onToggleSiteRedirect, onCopy, onPin, onUnPin }, state)
   const opsProps = Object.assign({ onQuickUpload, onOpenWebUi, onToggleGlobalRedirect }, state)
 
   return html`

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

@@ -4,7 +4,7 @@
 const browser = require('webextension-polyfill')
 const IsIpfs = require('is-ipfs')
 const { trimHashAndSearch } = require('../../lib/ipfs-path')
-const { contextMenuCopyAddressAtPublicGw, contextMenuCopyRawCid, contextMenuCopyCanonicalAddress } = require('../../lib/context-menus')
+const { contextMenuViewOnGateway, contextMenuCopyAddressAtPublicGw, contextMenuCopyRawCid, contextMenuCopyCanonicalAddress } = require('../../lib/context-menus')
 
 // The store contains and mutates the state for the app
 module.exports = (state, emitter) => {
@@ -63,6 +63,11 @@ module.exports = (state, emitter) => {
     }, 100)
   })
 
+  emitter.on('viewOnGateway', async () => {
+    port.postMessage({ event: contextMenuViewOnGateway })
+    window.close()
+  })
+
   emitter.on('copy', function (copyAction) {
     switch (copyAction) {
       case contextMenuCopyCanonicalAddress: