New style, saveAs, improve focus, prevent duplicating history

README.md

@@ -49,6 +49,7 @@ PRs for more protocols are welcome.
 - Autocomplete URLs from history (type in the URL bar)
 - Persist open windows when quitting
 - Basic Chrome Extension support (hardcoded into the source for now)
+- Save files from pages (any protocol)
 
 ![Agregore demo](agregore-demo-1.gif)
 
@@ -58,7 +59,7 @@ Feel free to open a Github issue if you wish to tackle one of the items on the r
 
 This project uses the [StandardJS](https://standardjs.com/) code style. Please format your code with `standard --fix` or run `npm run lint`.
 
-## Roadmap
+## Roadmap / TODOs
 
 - [x] Basic browser features
 	- [x] Navigate to URL
@@ -75,7 +76,7 @@ This project uses the [StandardJS](https://standardjs.com/) code style. Please f
 		- [x] Dev tools
 		- [x] `ctrl+[` and `ctrl+]` for navigating history
 		- [x] `ctrl+l` for selecting the navigation bar
-	- [ ] saveAs context menu (using fetch and fs.createWriteStream())
+	- [x] saveAs context menu (using fetch and fs.createWriteStream())
 	- [x] Persist windows on application quit
 - [ ] fetch API for hyperdrives [GH issue](https://github.com/cliqz-oss/dat-webext/issues/159)
 	- [ ] Creating an archive (scoped to page origin)
@@ -110,6 +111,9 @@ This project uses the [StandardJS](https://standardjs.com/) code style. Please f
 	- [ ] Developer options page
 	- [ ] Track extensions in a DB
 	- [ ] Drag and drop extension folder
+- [ ] Configure top-level page to load from URL
+	- [ ] Give access to Electron APIs
+	- [ ] Shortcut to agregore libraries like `electron-browser-view.js'
 - [ ] Password / Account management for web pages [using native OS APIs](https://github.com/atom/node-keytar)
 - [ ] Private browsing mode
 - [ ] PWA support

app/pages/welcome.html

@@ -8,6 +8,14 @@
 <meta name="mobile-web-app-capable" content="yes">
 
 <style>
+  :root {
+    --ag-color-purple: #6e2de5;
+    --ag-color-black: #111;
+    --ag-color-white: #F2F2F2;
+    --ag-color-green: #2de56e;
+  }
+
+
 	body, html {
 		display: flex;
 		flex: 1;
@@ -18,15 +26,26 @@
 		flex-direction: column;
     justify-content: center;
     align-items: center;
+    background: var(--ag-color-black);
+    color: var(--ag-color-white);
+    font-family: system-ui;
 	}
 	img {
 		width: 40vmin;
 	}
-	a::before, a::after {
-    content: " ⟐ "
-	}
+
 	a {
+    color: var(--ag-color-purple);
+    text-decoration: none;
     margin: 0.1em;
+  }
+
+  a:visited {
+    color: var(--ag-color-green);
+  }
+
+	a::before, a::after {
+    content: " ⟐ "
 	}
 </style>
 

app/protocols/index.js

@@ -25,18 +25,22 @@ function registerPriviledges () {
   ])
 }
 
-async function setupProtocols ({ protocol }) {
+async function setupProtocols (session) {
+  const { protocol: sessionProtocol } = session
+
   app.setAsDefaultProtocolClient('hyper')
   app.setAsDefaultProtocolClient('dat')
 
   const hyperProtocolHandler = await createHyperHandler()
-  protocol.registerStreamProtocol('hyper', hyperProtocolHandler)
+  sessionProtocol.registerStreamProtocol('hyper', hyperProtocolHandler)
+  globalProtocol.registerStreamProtocol('hyper', hyperProtocolHandler)
 
   const browserProtocolHandler = await createBrowserHandler()
-  protocol.registerStreamProtocol('agregore-browser', browserProtocolHandler)
+  sessionProtocol.registerStreamProtocol('agregore-browser', browserProtocolHandler)
 
   const datProtocolHandler = await createDatHandler()
-  protocol.registerStreamProtocol('dat', datProtocolHandler)
+  sessionProtocol.registerStreamProtocol('dat', datProtocolHandler)
+  globalProtocol.registerStreamProtocol('dat', datProtocolHandler)
 
 /*
   app.setAsDefaultProtocolClient('ipfs')

app/ui/context-menus.js

@@ -16,6 +16,8 @@ exports.pageContextMenu = function (event, params) {
     navigationGroup(this.webContents, params),
     historyBufferGroup(params),
     linkGroup(params),
+    linkGroup(params),
+    saveGroup(params),
     editGroup(params),
     developmentGroup(this.webContents, params)
   ])
@@ -138,3 +140,49 @@ function linkGroup ({ linkURL }) {
     })
   ]
 }
+
+function saveGroup ({ srcURL }) {
+  return !srcURL.length ? null : [
+    new MenuItem({
+      label: 'Save As',
+      click: (_, browserWindow) => saveAs(srcURL, browserWindow)
+    })
+  ]
+}
+
+async function saveAs (link, browserWindow) {
+  const fs = remote.require('fs')
+  const path = remote.require('path').posix
+  const pump = require('pump')
+  const { dialog } = remote
+  const { Readable } = require('stream')
+
+  const name = path.basename(link)
+
+  const response = await window.fetch(link)
+
+  const { filePath } = await dialog.showSaveDialog(browserWindow, {
+    defaultPath: name
+  })
+
+  if (!filePath) return
+
+  pump(
+    Readable.from(consumeBody(response.body)),
+    fs.createWriteStream(filePath)
+  )
+}
+
+async function * consumeBody (body) {
+  const reader = body.getReader()
+
+  try {
+    const { done, value } = await reader.read()
+
+    if (done) return
+
+    yield value
+  } finally {
+    reader.releaseLock()
+  }
+}

app/ui/electron-browser-view.js

@@ -164,6 +164,10 @@ class BrowserViewElement extends HTMLElement {
     for (const name of BrowserViewElement.METHODS()) {
       this[name] = (...args) => this.view.webContents[name](...args)
     }
+
+    this.addEventListener('focus', () => {
+      if (this.view) this.view.webContents.focus()
+    })
   }
 
   connectedCallback () {

app/ui/index.html

@@ -8,6 +8,13 @@
 <meta name="mobile-web-app-capable" content="yes">
 
 <style>
+  :root {
+    --ag-color-purple: #6e2de5;
+    --ag-color-black: #111;
+    --ag-color-white: #F2F2F2;
+    --ag-color-green: #2de56e;
+  }
+
 	html, body {
 		width: 100%;
 		height: 100%;
@@ -16,6 +23,8 @@
 		display: flex;
 		flex: 1;
 		flex-direction: column;
+		background: var(--ag-color-white);
+		font-family: system-ui;
 	}
   #view {
   	flex:1
@@ -24,20 +33,25 @@
 	header {
 		display: flex;
 		flex-direction: row;
+		border: 2px solid var(--ag-color-purple);
+		background: var(--ag-color-black);
+		color: var(--ag-color-white);
 	}
+
 	#urlform {
 		display: flex;
 		flex-direction: row;
 		flex:1;
-		border:none;
+		border: none;
 	}
 	#urlbar {
 		flex: 1;
 		border:none;
-	}
-
-	#backbutton, #frontbutton, #urlsubmit {
-		border:none;
+		background: none;
+		padding: 0.5em;
+		color: inherit;
+		font-size: inherit;
+		font-family: inherit;
 	}
 
 	.hidden {
@@ -49,21 +63,40 @@
 		flex-direction: column;
 		margin: 0px;
 		padding: 0px;
+		border: 2px solid var(--ag-color-purple);
+		background: var(--ag-color-black);
+		color: var(--ag-color-white);
 	}
 
 	#navoptions [data-selected] {
-		border: 1px solid black;
+		border: 1px solid var(--ag-color-green);
+	}
+
+	#navoptions:empty {
+    display: none;
+	}
+
+	button {
+    color: inherit;
+    font-size: inherit;
+    padding: 0.5em;
+    border: none;
+    background: none;
+    font-family: inherit;
 	}
 
 	#navoptions button {
-		background: none;
-		border: 1px solid rgba(0,0,0,0);
+		border: 1px solid var(--ag-color-purple);
 		display: flex;
 		flex-direction: row;
 		overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 	}
+
+	*:focus {
+    outline: 2px solid var(--ag-color-green);
+	}
 </style>
 
 <script src="./electron-browser-view.js"></script>
@@ -78,6 +111,6 @@
 </header>
 <section id="navoptions" aria-live="polite"></section>
 
-<browser-view id="view" partition="persist:web-content"></browser-view>
+<browser-view tabindex="0" id="view" partition="persist:web-content"></browser-view>
 
 <script src="script.js"></script>

app/ui/script.js

@@ -179,6 +179,11 @@ function looksLikeDomain (string) {
 }
 
 function navigateTo (url) {
-  webview.src = url
-  webview.focus()
+  if (webview.getURL() === url) {
+    console.log('Reloading')
+    webview.reload()
+  } else {
+    webview.src = url
+    webview.focus()
+  }
 }