Merge pull request #590 from ipfs-shipyard/feat/bundle-webui

Ship the new WebUI

.gitignore

@@ -9,7 +9,8 @@ yarn-error.log
 crowdin.yml
 .*~
 add-on/dist
+add-on/webui/
+add-on/ui-kit/
 coverage
 .nyc_output
-add-on/ui-kit/**/*
 add-on/manifest.json

add-on/src/lib/ipfs-client/index.js

@@ -1,5 +1,6 @@
 'use strict'
 
+const browser = require('webextension-polyfill')
 const external = require('./external')
 const embedded = require('./embedded')
 
@@ -14,7 +15,9 @@ async function initIpfsClient (opts) {
     client = external
   }
 
-  return client.init(opts)
+  const instance = await client.init(opts)
+  _reloadIpfsClientDependents() // async (API is present)
+  return instance
 }
 
 async function destroyIpfsClient () {
@@ -23,6 +26,28 @@ async function destroyIpfsClient () {
       await client.destroy()
     } finally {
       client = null
+      await _reloadIpfsClientDependents() // sync (API stopped working)
+    }
+  }
+}
+
+function _isWebuiTab (url) {
+  const bundled = !url.startsWith('http') && url.includes('/webui/index.html#/')
+  const ipns = url.includes('/webui.ipfs.io/#/')
+  return bundled || ipns
+}
+
+async function _reloadIpfsClientDependents () {
+  if (browser.tabs && browser.tabs.query) {
+    const tabs = await browser.tabs.query({})
+    if (tabs) {
+      tabs.forEach((tab) => {
+        // detect bundled webui in any of open tabs
+        if (_isWebuiTab(tab.url)) {
+          browser.tabs.reload(tab.id)
+          console.log('[ipfs-companion] reloading bundled webui')
+        }
+      })
     }
   }
 }

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

@@ -33,6 +33,7 @@ module.exports = function contextActions ({
   })}
   ${navItem({
     text: browser.i18n.getMessage(contextMenuCopyRawCid),
+    disabled: !activePinControls,
     onClick: () => onCopy(contextMenuCopyRawCid)
   })}
   ${!isPinned ? (

add-on/src/popup/browser-action/nav-item.js

@@ -3,14 +3,16 @@
 
 const html = require('choo/html')
 
-function navItem ({ icon, text, bold, disabled, onClick }) {
+function navItem ({ icon, text, disabled, addClass, onClick }) {
   let className = 'black button-reset db w-100 bg-white b--none outline-0--focus pv2 ph3 f5 tl'
-  if (bold) className += ' b'
   if (disabled) {
     className += ' o-40'
   } else {
     className += ' pointer bg-near-white--hover'
   }
+  if (addClass) {
+    className += ` ${addClass}`
+  }
 
   return html`
     <button class="${className}" onclick=${disabled ? null : onClick} ${disabled ? 'disabled' : ''}>

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

@@ -23,7 +23,7 @@ module.exports = function operations ({
     <div class="fade-in pv1">
   ${navItem({
     text: browser.i18n.getMessage('panel_quickUpload'),
-    bold: true,
+    addClass: 'b',
     disabled: !activeQuickUpload,
     onClick: onQuickUpload
   })}

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

@@ -125,9 +125,8 @@ module.exports = (state, emitter) => {
 
   emitter.on('openWebUi', async () => {
     try {
-      const options = await browser.storage.local.get('ipfsApiUrl')
-      const apiUrl = options['ipfsApiUrl']
-      await browser.tabs.create({ url: apiUrl + '/webui/' })
+      // Open bundled version of WebUI
+      await browser.tabs.create({ url: '/webui/index.html' })
       window.close()
     } catch (error) {
       console.error(`Unable Open Web UI due to ${error}`)

package.json

@@ -13,6 +13,7 @@
     "clean:build": "shx rm -rf build/*",
     "clean:dist": "shx rm -rf add-on/dist",
     "clean:ui-kit": "shx rm -rf add-on/ui-kit",
+    "clean:webui": "shx rm -rf add-on/webui",
     "build": "run-s clean build:*",
     "build:copy": "run-s build:copy:*",
     "build:copy:src": "shx mkdir -p add-on/dist && shx cp -R add-on/src/* add-on/dist",
@@ -22,6 +23,12 @@
     "build:copy:ui-kit:ipfs-css:fonts": "shx mkdir -p add-on/ui-kit/fonts && shx cp node_modules/ipfs-css/fonts/* add-on/ui-kit/fonts",
     "build:copy:ui-kit:ipfs-css:icons": "shx mkdir -p add-on/ui-kit/icons && shx cp node_modules/ipfs-css/icons/* add-on/ui-kit/icons",
     "build:copy:ui-kit:tachyons": "shx mkdir -p add-on/ui-kit && shx cp node_modules/tachyons/css/tachyons.css add-on/ui-kit",
+    "build:webui": "cross-env CID=QmZqJ4k1cTbvKuySbR9gReGJjZbJpnmPvEWJs1Kgy4Ma7s npm run build:webui:with-cid",
+    "build:webui:with-cid": "cross-env-shell \"shx test -d add-on/webui/ || (npm run build:webui:dir && (npm run build:webui:fetch-ipfs || npm run build:webui:fetch-http) && npm run build:webui:minimize)\"",
+    "build:webui:dir": "shx mkdir -p add-on/webui",
+    "build:webui:fetch-ipfs": "cross-env-shell \"ipfs get $CID -o add-on/webui/\"",
+    "build:webui:fetch-http": "cross-env-shell \"node scripts/fetch-webui-from-gateway.js $CID add-on/webui/\"",
+    "build:webui:minimize": "shx rm -rf add-on/webui/static/js/*.map && shx rm -rf add-on/webui/static/css/*.map",
     "build:js": "run-p build:js:*",
     "build:js:webpack": "webpack -p",
     "build:minimize-dist": "shx rm -rf add-on/dist/lib add-on/dist/contentScripts/ add-on/dist/bundles/ipfsProxyContentScriptPayload.bundle.js",
@@ -38,10 +45,10 @@
     "test": "run-s test:*",
     "test:functional": " nyc --reporter=lcov --reporter=text mocha --timeout 15000 --require ignore-styles --reporter mocha-jenkins-reporter \"test/functional/**/*.test.js\"",
     "lint": "run-s lint:*",
-    "lint:standard": "standard -v \"*.js\" \"add-on/src/**/*.js\" \"test/**/*.js\"",
+    "lint:standard": "standard -v \"*.js\" \"add-on/src/**/*.js\" \"test/**/*.js\" \"scripts/**/*.js\"",
     "lint:web-ext": "web-ext lint",
     "fix:lint": "run-s fix:lint:*",
-    "fix:lint:standard": "standard -v --fix \"*.js\" \"add-on/src/**/*.js\" \"test/**/*.js\"",
+    "fix:lint:standard": "standard -v --fix \"*.js\" \"add-on/src/**/*.js\" \"test/**/*.js\" \"scripts/**/*.js\"",
     "precommit": "run-s lint:standard",
     "prepush": "run-s clean build lint test",
     "firefox": "web-ext run --url about:debugging",
@@ -58,7 +65,7 @@
   "private": true,
   "preferGlobal": false,
   "resolutions": {
-    "stream-http": "https://github.com/jhiesey/stream-http/tarball/2a8467dd84da9ab93cb43ca6cf78a75fef07f282/stream-http.tar.gz",
+    "stream-http": "3.0.0",
     "uglify-es": "npm:terser"
   },
   "devDependencies": {
@@ -68,6 +75,7 @@
     "babel-plugin-syntax-async-generators": "6.13.0",
     "chai": "4.1.2",
     "cross-env": "5.2.0",
+    "download-cli": "1.1.1",
     "fakefile": "0.0.9",
     "fs-promise": "2.0.3",
     "get-firefox": "2.2.0",
@@ -80,11 +88,13 @@
     "npm-run-all": "4.1.3",
     "nyc": "13.0.1",
     "raw-loader": "0.5.1",
+    "request-progress": "3.0.0",
     "shx": "0.3.2",
     "simple-progress-webpack-plugin": "1.1.2",
     "sinon": "6.1.5",
     "sinon-chrome": "2.3.2",
     "standard": "12.0.1",
+    "tar": "4.4.6",
     "terser": "3.8.2",
     "transform-loader": "0.2.4",
     "web-ext": "2.9.1",

scripts/fetch-webui-from-gateway.js

@@ -0,0 +1,27 @@
+/* This is a fallback script used when ipfs cli fails or is not available
+ * More details: https://github.com/ipfs-shipyard/ipfs-webui/issues/843
+ */
+const tar = require('tar')
+const request = require('request')
+const progress = require('request-progress')
+
+const cid = process.argv[2]
+const destination = process.argv[3]
+
+// pick random preloader
+const no = Math.round(Math.random()) // 0 or 1
+const url = 'https://node' + no + '.preload.ipfs.io/api/v0/get?arg=' + cid + '&archive=true&compress=true'
+
+console.log('Fallback to HTTP GET from: ' + url)
+
+progress(request(url), { lengthHeader: 'x-content-length', delay: 10000 })
+  .on('progress', (state) => console.log(`progress: ${Math.round(state.percent)} %, transferred: ${state.size.transferred}`, state))
+  .on('response', (response) => console.log('Status Code', response.statusCode))
+  .on('error', (error) => console.log('Download Error', error))
+  .on('close', () => console.log('Done! webui extracted to: ' + destination))
+  .pipe(
+    tar.extract({
+      strip: 1,
+      C: destination
+    })
+  )

web-ext-config.js

@@ -6,6 +6,7 @@ module.exports = {
   sourceDir: 'add-on/',
   ignoreFiles: [
     'src/',
+    '*.map',
     'manifest.*.json'
   ],
   // Command options: