Skip to content

Commit

Permalink
Gateway Diagnostics PoC
Browse files Browse the repository at this point in the history
- discussed in #51
- FEATURE: version and swarm peer info read from API
- UX: hide irrelevant elements when redirect is disabled
  • Loading branch information
lidel committed Jan 27, 2016
1 parent df5f30b commit e532520
Show file tree
Hide file tree
Showing 8 changed files with 184 additions and 97 deletions.
117 changes: 65 additions & 52 deletions data/panel.html
Original file line number Diff line number Diff line change
@@ -1,63 +1,76 @@
<html>

<head>
<meta charset="utf-8">
<style type="text/css" media="all">
body {
background: url('icon-off-64.png') no-repeat right 1em top 1em;
}

p > img {
vertical-align: middle;
}

ul {
list-style-type: none;
margin: 0;
padding: 0.25em;
}

li {
background: rgba(238, 238, 238, 0.5);
cursor: pointer;
padding: 0.5em;
}

li:hover {
background: rgba(133, 222, 222, 0.75);
color: #111;
}

li:active {
background: rgba(74, 158, 161, 0.8);
color: #fff;
}
<meta charset="utf-8">
<style type="text/css" media="all">
body {
background: url('icon-off-64.png') no-repeat right 1em top 1em;
}

</style>
p > img {
vertical-align: middle;
}

ul {
list-style-type: none;
margin: 0;
padding: 0.25em;
background-color: rgba(222, 222, 222, 0.75);
}

li {
padding: 0.5em;
cursor: default;
}
li.header {
font-weight: bold;
/*background: url('icon-on-16.png') no-repeat left 0.5em top 0.5em;
padding-left: 2em;*/
}
li.action {
background: rgba(238, 238, 238, 0.5);
cursor: pointer;
}

li.action:hover {
background: rgba(133, 222, 222, 0.75);
color: #111;
}

li.action:active {
background: rgba(74, 158, 161, 0.8);
color: #fff;
}

#gateway-status > li > span:nth-of-type(2) {
font-weight: bold;
display: inline-block;
float: right;
}

</style>
</head>

<body>
<p>
<img src="icon-on-16.png" />&nbsp;
<strong data-l10n-id="panel_header"></strong>
</p>
<ul>
<li id="toggle-gateway-redirect" data-l10n-id="panel_toggle-gateway-redirect"></li>
<li id="open-webui" data-l10n-id="panel_open-webui"></li>
<li id="open-preferences" data-l10n-id="panel_open-preferences"></li>
</ul>
<ul id="gateway-status">
<li id="gateway-address"><span data-l10n-id="panel_status-gateway-address"></span><span id="gateway-address-val"></span></li>
<li id="gateway-version"><span data-l10n-id="panel_status-gateway-version"></span><span id="gateway-version-val"></span></li>
<li id="swarm-peers"><span data-l10n-id="panel_status-swarm-peers"></span><span id="swarm-peers-val"></span></li>
</ul>

<ul id="operations">
<li class="header" data-l10n-id="panel_operations-header"></li>
<li class="action" id="open-webui" data-l10n-id="panel_open-webui"></li>
<li class="action" id="open-preferences" data-l10n-id="panel_open-preferences"></li>
<li class="action" id="toggle-gateway-redirect" data-l10n-id="panel_toggle-gateway-redirect"></li>
</ul>

<div id="ipfs-only">
<p>
<img src="icon-on-16.png" />&nbsp;
<strong data-l10n-id="panel_ipfs-only-header"></strong>
</p>
<ul>
<li id="pin-current-ipfs-address" data-l10n-id="panel_pin-current-ipfs-address"></li>
<li id="copy-current-ipfs-address" data-l10n-id="panel_copy-current-ipfs-address"></li>
<li id="copy-current-public-gw-url" data-l10n-id="panel_copy-current-public-gw-url"></li>
</ul>
</div>
<ul id="ipfs-resource-actions">
<li class="header" data-l10n-id="panel_ipfs-only-header"></li>
<li class="action" id="pin-current-ipfs-address" data-l10n-id="panel_pin-current-ipfs-address"></li>
<li class="action" id="copy-current-ipfs-address" data-l10n-id="panel_copy-current-ipfs-address"></li>
<li class="action" id="copy-current-public-gw-url" data-l10n-id="panel_copy-current-public-gw-url"></li>
</ul>

</body>

Expand Down
49 changes: 41 additions & 8 deletions data/panel.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,65 @@
/* global self */
let getById = (id) => {
return document.getElementById(id)
}

let renderGatewayAddress = (prefs) => {
if (prefs.useCustomGateway) {
return prefs.customGatewayHost + ':' + prefs.customGatewayPort
} else {
return 'OFF'
}
}

function showIf(id, condition) {
getById(id).style.display = condition ? 'block' : 'none'
}

// incoming
self.port.on('show', function (context) {
// console.log('show event received by panel.js (ipfsResource='+ipfsResource+')')
let isPinnable = context['isPinnable']
let prefs = context.preferences

// render diagnostic info
getById('gateway-address-val').innerHTML = renderGatewayAddress(prefs)

// show/hide ipfs-only items
document.getElementById('ipfs-only')
.style.display = isPinnable ? 'block' : 'none'
// if current page is pinnable
showIf('ipfs-resource-actions', context.isPinnable)

// match panel size
// if custom gateway is used
showIf('open-webui', prefs.useCustomGateway)
showIf('gateway-version', prefs.useCustomGateway)
showIf('swarm-peers', prefs.useCustomGateway)
showIf('pin-current-ipfs-address', prefs.useCustomGateway)

// resize panel to match size of rendered items
self.port.emit('resize', { 'width': document.body.scrollWidth, 'height': document.body.scrollHeight })
})

self.port.on('version', function (update) {
getById('gateway-version-val').innerHTML = update
? update.Version + '-' + update.Commit
: 'n/a'
})

self.port.on('swarm-peers', function (update) {
getById('swarm-peers-val').innerHTML = (update && update.Strings)
? update.Strings.length
: 'n/a'
})

// outgoing
function forwardClickEvent (eventName) {
document.getElementById(eventName)
getById(eventName)
.addEventListener('click', function (event) { // eslint-disable-line no-unused-vars
self.port.emit(eventName)
})
}

// always visible
forwardClickEvent('toggle-gateway-redirect')
forwardClickEvent('open-webui')
forwardClickEvent('open-preferences')

// ipfs-only
forwardClickEvent('pin-current-ipfs-address')
forwardClickEvent('copy-current-ipfs-address')
forwardClickEvent('copy-current-public-gw-url')
53 changes: 53 additions & 0 deletions lib/api.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
'use strict'

const prefs = require('sdk/simple-prefs').prefs

const notifications = require('sdk/notifications')
const Request = require('sdk/request').Request
const URL = require('sdk/url').URL

function apiUrl (path) {
return URL('http://' + prefs.customGatewayHost + ':' + prefs.customApiPort + '/api/v0/' + path).toString()
}

function pin (address) {
address = address.split('#')[0] // ignore URL hash
address = address.split('?')[0] // ignore GET params

new Request({
url: apiUrl('pin/add?arg=' + address),
onComplete: function (response) {
let pinned = response.status === 200 && response.json.Pinned ? response.json.Pinned[0] : false
notifications.notify({
title: pinned ? 'Pinned' : 'Failed to pin',
text: pinned || address.slice(6)
})
}
}).get()
}

function query (path, callback) {
new Request({
url: apiUrl(path),
onComplete: function (response) {
let data = null
if (response.status === 200) {
data = response.json
}
callback(data)
}
}).get()
}

function getVersion (callback) {
query('version', callback)
}

function getSwarmPeers (callback) {
query('swarm/peers?stream-channels=true', callback)
}

exports.query = query
exports.pin = pin
exports.getVersion = getVersion
exports.getSwarmPeers = getSwarmPeers
17 changes: 14 additions & 3 deletions lib/gui.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const cm = require('sdk/context-menu')
const clipboard = require('sdk/clipboard')
const l10n = require('sdk/l10n').get
const gw = require('./gateways.js')
const pin = require('./pin.js').pin
const api = require('./api.js')
const prefs = require('sdk/simple-prefs').prefs
const panels = require('sdk/panel')
const tabs = require('sdk/tabs')
Expand Down Expand Up @@ -90,7 +90,7 @@ function getCurrentURI () {
}

function pinCurrentIpfsAddress () {
pin(getCurrentURI().spec.replace(gw.customUri.spec, '/'))
api.pin(getCurrentURI().spec.replace(gw.customUri.spec, '/'))
}

function copyCurrentIpfsAddress () {
Expand All @@ -116,8 +116,19 @@ panel.on('show', function () {
'uri': currentUri,
'isPinnable': gw.isPinnable(currentUri)
}
// inform panel if current page is an IPFS resource than can be pinned
// trigger panel init/refresh
panel.port.emit('show', context)

if (prefs.useCustomGateway) {
// async update of version info
api.getVersion((data) => {
panel.port.emit('version', data)
})
// async update peer info
api.getSwarmPeers((data) => {
panel.port.emit('swarm-peers', data)
})
}
})

/*
Expand Down
29 changes: 0 additions & 29 deletions lib/pin.js

This file was deleted.

7 changes: 5 additions & 2 deletions locale/en-US.properties
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,14 @@ customApiPort_description=Used for pinning (on the Gateway host)
linkify_title=Extended IPFS Link Support
linkify_description=(EXPERIMENTAL) Rewrite links to /ip(f|n)s/* paths on every page to point to IPFS gateway. Make plaintext IPFS links clickable.

panel_status-gateway-address=Gateway
panel_status-gateway-version=Version
panel_status-swarm-peers=Swarm Peers

panel_header=IPFS Redirect Addon
panel_toggle-gateway-redirect=Toggle Gateway Redirect
panel_operations-header=Operations
panel_open-webui=Open WebUI
panel_open-preferences=Open Preferences
panel_toggle-gateway-redirect=Toggle Gateway Redirect

panel_ipfs-only-header=Actions for current address
panel_pin-current-ipfs-address=Pin IPFS Resource
Expand Down
7 changes: 5 additions & 2 deletions locale/pl-PL.properties
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,14 @@ customApiPort_description=Używany do przypinania (na hoście Bramy)
linkify_title=Rozszerzone wsparcie linków IPFS
linkify_description=(EKSPERYMENT) Przepisuje linki do zasobów /ip(f|n)s/* na każdej stronie tak, aby wskazywały na Bramę. Dodatkowo sprawia, że czysto-tekstowe adresy IPFS są klikalne.

panel_status-gateway-address=Brama
panel_status-gateway-version=Wersja
panel_status-swarm-peers=Połączenia

panel_header=Operacje IPFS
panel_toggle-gateway-redirect=Przełącz przekierowanie
panel_operations-header=Operacje
panel_open-webui=Otwórz WebUI
panel_open-preferences=Otwórz Preferencje
panel_toggle-gateway-redirect=Przełącz przekierowanie

panel_ipfs-only-header=Operacje dla tego zasobu
panel_pin-current-ipfs-address=Przypnij zasób IPFS
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"id": "ipfs-firefox-addon@lidel.org",
"description": "Access IPFS resources via custom HTTP2IPFS gateway",
"author": "Marcin Rataj",
"version": "1.4.2",
"version": "1.5.0",
"license": "CC0-1.0",
"homepage": "https://github.com/lidel/ipfs-firefox-addon",
"icon": "data/icon-on-64.png",
Expand Down

0 comments on commit e532520

Please sign in to comment.