Skip to content

Commit

Permalink
Merge pull request #277 from ipfs/274-redirect-toggle
Browse files Browse the repository at this point in the history 
Improved Automatic Mode and Options UX
  • Loading branch information
@lidel
lidel authored Sep 10, 2017
2 parents e3d9669 + 5d34145 commit 1343241
Show file tree
Hide file tree
Showing 7 changed files with 190 additions and 69 deletions.
15 changes: 8 additions & 7 deletions add-on/src/lib/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -380,13 +380,14 @@ function setApiStatusUpdateInterval (ipfsApiPollMs) {
}

async function apiStatusUpdate () {
let oldPeerCount = state.peerCount
state.peerCount = await getSwarmPeerCount()
updatePeerCountDependentStates()
updatePeerCountDependentStates(oldPeerCount, state.peerCount)
sendStatusUpdateToBrowserAction()
}

function updatePeerCountDependentStates () {
updateAutomaticModeRedirectState()
function updatePeerCountDependentStates (oldPeerCount, newPeerCount) {
updateAutomaticModeRedirectState(oldPeerCount, newPeerCount)
updateBrowserActionBadge()
updateContextMenus()
}
Expand Down Expand Up @@ -490,13 +491,13 @@ function rasterIconData (iconPath, size) {
// OPTIONS
// ===================================================================

function updateAutomaticModeRedirectState () {
// enable/disable gw redirect based on API status and available peer count
function updateAutomaticModeRedirectState (oldPeerCount, newPeerCount) {
// enable/disable gw redirect based on API going online or offline
if (state.automaticMode) {
if (state.peerCount > 0 && !state.redirect) { // enable if disabled
if (oldPeerCount < 1 && newPeerCount > 0 && !state.redirect) {
browser.storage.local.set({useCustomGateway: true})
.then(() => notify('notify_apiOnlineTitle', 'notify_apiOnlineAutomaticModeMsg'))
} else if (state.peerCount < 1 && state.redirect) { // disable if enabled
} else if (oldPeerCount > 0 && newPeerCount < 1 && state.redirect) {
browser.storage.local.set({useCustomGateway: false})
.then(() => notify('notify_apiOfflineTitle', 'notify_apiOfflineAutomaticModeMsg'))
}
Expand Down
179 changes: 145 additions & 34 deletions add-on/src/options/options.html
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,167 @@
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<style type="text/css">
input { display: inline-block; } /* fix for https://github.com/ipfs/ipfs-companion/issues/257 */
fieldset {
border: none;
border-top: 3px solid #3E9398;
display: flex;
flex-direction: column;
margin-bottom: .5em;
min-width: 40em;
}
legend {
letter-spacing: .15em;
text-transform: uppercase;
padding: .5em;
font-weight: bold;
}
fieldset > div {
padding: 1em;
display: flex;
flex-direction: row;
justify-content: space-between;
}
fieldset > div + div {
border-top: 1px solid #ccc;
}
fieldset > div > * {
align-self: center;

}
label {
flex: 1;
}
label > dl > dd {
opacity: .5;
font-size: .9em;
margin-left: 2em;
margin-right: .2em;
}
div:hover {
background-color: rgba(62, 148, 152, 0.05);
}
div:hover > label > dl > dd {
opacity: 1;
}
input, textarea {
flex: 1;
padding: .5em;
font-family: monospace;
}
input[type=text],
input[type=url],
input[type=number],
textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
border: 1px solid #ccc;
}
input[type=text]:focus,
input[type=url]:focus,
input[type=number]:focus,
textarea:focus {
outline: none;
border: 1px solid #3E9398;
box-shadow: 0 0 5px #5FCBCF;
}
</style>
<script src="../lib/npm/browser-polyfill.min.js"></script>
</head>

<body>

<form>
<fieldset style="line-height: 2em; font-family: sans-serif;">
<legend>Basic</legend>


<p><label>Public Gateways Hosts <input type="text" id="publicGateways" size="40" required placeholder="List of hostnames separated with spaces"/></label></p>

<p><label>Custom Gateway URL <input type="url" id="customGatewayUrl" size="40" inputmode="url" required pattern="https?://.+"/></label></p>


<p><label>IPFS API URL <input type="url" id="ipfsApiUrl" size="40" inputmode="url" required pattern="https?://.+"/></label></p>

<p><label>Redirect IPFS Requests to the Custom Gateway <input type="checkbox" id="useCustomGateway" /></label></p>

<p><label>Automatic Mode <small>(Redirect only when IPFS API is Online and node has peers)</small> <input type="checkbox" id="automaticMode" /></label></p>

<fieldset>
<legend>Gateways</legend>
<div>
<label for="publicGateways">
<dl>
<dt>Public Gateways</dt>
<dd>List of hostnames known to expose IPFS under <code>/ipfs/</code></dd>
</dl>
</label>
<textarea id="publicGateways" rows="4" required autocomplete="off" spellcheck="false" placeholder="List of hostnames separated with spaces or newlines"></textarea>
</div>
<div>
<label for="customGatewayUrl">
<dl>
<dt>Custom Gateway</dt>
<dd>URL of preferred HTTP2IPFS&nbsp;Gateway</dd>
</dl>
</label>
<input type="url" id="customGatewayUrl" inputmode="url" required pattern="https?://.+"/>
</div>
<div>
<label for="useCustomGateway">
<dl>
<dt>Use Custom Gateway</dt>
<dd>Redirect requests made to <em>Public</em> gateways to the <em>Custom</em> gateway</dd>
</dl>
</label>
<input type="checkbox" id="useCustomGateway" />
</div>
</fieldset>
</form>

<form>
<fieldset style="line-height: 2em; font-family: sans-serif;">
<legend>Advanced</legend>

<p><label>IPFS API Status Poll Interval (ms) <input type="number" inputmode="numeric" id="ipfsApiPollMs" min="1000" max="60000" step="1000" required /></label></p>

<fieldset>
<legend>API</legend>
<div>
<label for="ipfsApiUrl">
<dl>
<dt>IPFS API URL</dt>
<dd>Hint: this is where <code>/webui</code> lives</dd>
</dl>
</label>
<input type="url" id="ipfsApiUrl" inputmode="url" required pattern="https?://.+"/>
</div>
<div>
<label for="ipfsApiPollMs">
<dl>
<dt>Status Poll Interval</dt>
<dd>How often peer count is refreshed (in miliseconds)</dd>
</dl>
</label>
<input type="number" inputmode="numeric" id="ipfsApiPollMs" min="1000" max="60000" step="1000" required />
</div>
<div>
<label for="automaticMode">
<dl>
<dt>Automatic Mode<dt>
<dd>Toggle use of <em>Custom Gateway</em> when IPFS API availability changes</dd>
</dl>
</label>
<input type="checkbox" id="automaticMode" />
</div>
</fieldset>
</form>

<form>
<fieldset style="line-height: 2em; font-family: sans-serif;">
<legend>Experiments <small>(these PoC options may degrade browser performance)</small></legend>

<p><label>Enable <code>dnslink</code> lookups for every website <input type="checkbox" id="dnslink" /></label></p>
<p><label>Make plaintext IPFS links clickable <input type="checkbox" id="linkify" /></label></p>

<fieldset>
<legend>Experiments</legend>
<div><span><strong>Note:</strong> these features are work-in-progress and may degrade browser performance. <abbr title="Your Mileage May Vary">YMMV</abbr>.</span></div>
<div>
<label for="linkify">
<dl>
<dt>Clickable IPFS Addresses</dt>
<dd>Turn plaintext <code>/ipfs/</code> paths into clickable links</dd>
</dl>
</label>
<input type="checkbox" id="linkify" />
</div>
<div>
<label for="dnslink">
<dl>
<dt>DNSLINK Support<dt>
<dd>Perform DNS lookup for every visited website and use <em>Custom Gateway</em> if DNSLINK is present in its DNS TXT record<br>
<strong>(known to slow down the browser)</strong></dd>
</dl>
</label>
<input type="checkbox" id="dnslink" />
</div>
</fieldset>
</form>

<script src="../lib/npm/browser-polyfill.min.js"></script>
<script src="../lib/option-defaults.js"></script>
<script src="../lib/data-i18n.js"></script>
<script src="../lib/option-defaults.js"></script>
<script src="options.js"></script>

</body>
Expand Down
11 changes: 10 additions & 1 deletion add-on/src/options/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ async function saveOption (name) {
case 'url':
change[name] = element.value
break
case 'textarea':
// normalize input into a string of hostnames separated by a single space
change[name] = element.value.replace(/[\r\n,;]+/g, ' ').replace(/ +(?= )/g, '').trim()
break
case 'checkbox':
change[name] = element.checked
break
Expand All @@ -33,8 +37,13 @@ async function readOption (name) {
case 'url':
element.value = oldValue
break
case 'textarea':
element.onfocusout = () => saveOption(name)
// display every hostname in a new line
element.value = oldValue.trim().split(' ').join('\n')
break
case 'number':
// handle number change via mouse + widget controls
// handle number change via mouse + widget controls
element.onclick = () => saveOption(name)
element.value = oldValue
break
Expand Down
26 changes: 15 additions & 11 deletions add-on/src/popup/browser-action.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<html>

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style type="text/css">
Expand All @@ -8,7 +7,7 @@
when manifest had "browser_style": true
We duplicated them here for now to have the same look and feel under Chromium
*/
html
html,
body {
background: transparent;
box-sizing: border-box;
Expand All @@ -18,6 +17,8 @@
font: caption;
margin: 0;
padding: 0;
-moz-user-select: none;
user-select: none;
}

body * {
Expand Down Expand Up @@ -111,10 +112,11 @@
width: 6rem;
height: 6rem;
padding: 0.25rem;
display: block;
float: left;
}
#gateway-status {
display: flex;
align-items: center;
flex-direction: row;
padding: 0;
}
#gateway-status ul {
Expand All @@ -123,26 +125,29 @@
padding: 0.5rem;
min-height: 3rem;
min-width: 14rem;
display: flex;
flex-direction: column;
}
#gateway-status li {
text-transform: uppercase;
font-size: small;
font-size: small;
padding: 0;
cursor: default;
display: block;
max-height:2rem;
text-overflow: ellipsis;
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#gateway-status li > span:nth-of-type(2) {
font-family: monospace;
display: block;
float:right;
text-align: right;
text-overflow: ellipsis;
padding-left: 1rem;
}
.hidden { display: none !important; }
</style>
<script src="../lib/npm/browser-polyfill.min.js"></script>
</head>

<body>
Expand Down Expand Up @@ -211,7 +216,6 @@
</div>
</div>

<script src="../lib/npm/browser-polyfill.min.js"></script>
<script src="../lib/data-i18n.js"></script>
<script src="browser-action.js"></script>
</body>
Expand Down
3 changes: 0 additions & 3 deletions add-on/src/popup/browser-action.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,9 +240,6 @@ async function updateBrowserActionPopup () {
show('redirect-disabled')
show('enable-gateway-redirect')
}
if (options['automaticMode']) {
hide('toggle-gateway-redirect')
}
set('gateway-address-val', options['customGatewayUrl'])
} catch (error) {
console.error(`Unable update redirect state due to ${error}`)
Expand Down
3 changes: 1 addition & 2 deletions add-on/src/popup/quick-upload.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<html>

<!DOCTYPE html>
<head>
<title>IPFS Upload</title>
<meta charset="utf-8">
Expand Down
Loading

0 comments on commit 1343241

Please sign in to comment.