Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved Automatic Mode and Options UX #277

Merged
merged 8 commits into from
Sep 10, 2017
Merged

Improved Automatic Mode and Options UX #277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a1aca04
feat(automaticMode): toggle redirect only when API is going online/of…
lidel Sep 4, 2017
65424b0
chore(package): bump versions
lidel Sep 4, 2017
c7ae5bf
refactor(browserAction): fix height in Chrome
lidel Sep 5, 2017
0f29906
style(preferences): improved UX and validation
lidel Sep 5, 2017
a55dcea
style(options): add descriptions for all options
lidel Sep 7, 2017
5bee3b0
Merge branch 'master' into 274-redirect-toggle
lidel Sep 7, 2017
54d0bcd
fix(options): disable spellcheck in textarea
lidel Sep 7, 2017
5d34145
style(options): label tweaks after cake-induced proofread
lidel Sep 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions add-on/src/lib/common.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<html>

<!DOCTYPE html>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same in this file, the tag was removed

<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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<html>

<!DOCTYPE html>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a doctype is good, but now the <html> tag was removed! (And github doesn't escape < html > in review comments... Oops)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think its plain only in review comments.
Syntax is highlighted correctly when full file is displayed.

ps. 🍰

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