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 6 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 for exposing IPFS resources under <code>/ipfs/</code> path</dd>
Copy link

Choose a reason for hiding this comment

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

Recommend rewording:
<dd>List of hostnames known to expose IPFS under <code>/ipfs/</code></dd>

Copy link
Member Author

Choose a reason for hiding this comment

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

🍰

Copy link
Member Author

@lidel lidel Sep 7, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

from AndyS2 (cake was provided via IRC):

starting everything small looks a bit weird. How about 'A list of hostnames ...' and changing everything like that?

</dl>
</label>
<textarea id="publicGateways" rows="4" required placeholder="List of hostnames separated with spaces or newlines"></textarea>
</div>
<div>
<label for="customGatewayUrl">
<dl>
<dt>Custom Gateway</dt>
<dd>URL address of preferred HTTP2IPFS&nbsp;Gateway</dd>
Copy link
Member Author

Choose a reason for hiding this comment

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

from AndyS2:

dunno if 'URL address' is correct. it's either URL or web address

Copy link

Choose a reason for hiding this comment

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

Agreed with Andy, it should probably be "URL"

</dl>
</label>
<input type="url" id="customGatewayUrl" inputmode="url" required pattern="https?://.+"/>
</div>
<div>
<label for="useCustomGateway">
<dl>
<dt>Use Custom Gateway</dt>
<dd>replace requests to <em>Public</em> gateway with <em>Custom</em> one</dd>
Copy link

Choose a reason for hiding this comment

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

"Redirect requests made to Public gateways to the Custom gateway"

</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>
Copy link
Member Author

Choose a reason for hiding this comment

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

from AndyS2:

Time interval after which peer count is refreshed (in milliseconds)

Copy link

Choose a reason for hiding this comment

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

I believe "How often peer count is refreshed" is fine, use simpler words whenever it makes sense.

</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