style tweaks; limit history; cmd+l focuses addr; show full url on focus

app/addressbar/index.css

@@ -4,7 +4,7 @@
 }
 
 .addressbar {
-	padding: 3px 5px 3px 32px;
+	padding: 3px 40px 3px 32px;
 	margin: 0 5px;
 	height: 100%;
 	font-size: 15px;

app/addressbar/index.js

@@ -3,7 +3,7 @@ const Config = require('electron-config');
 const config = new Config();
 const starsDB = require('../db/stars');
 
-let isReady = false, el, starBox, lastUrl;
+let isReady = false, el, starBox, lastShortUrl = '', lastFullUrl = '';
 
 
 function gotoUrl (url) {
@@ -26,7 +26,7 @@ function isValidUrl (url) {
 
 
 function parseAnyAddress (url) {
-	url = getCustomAddress(url);
+	url = shortenUrl(url);
 	const parts = url.split('/');
 	let id;
 	url = '';
@@ -41,29 +41,49 @@ function parseAnyAddress (url) {
 
 
 function onUrlChanged (webview, issue) {
-	const newUrl = getCustomAddress(config.get('state.url'));
-	const hasUrlChanged = (lastUrl !== newUrl);
-	lastUrl = el[0].value = newUrl;
+	lastFullUrl = config.get('state.url');
+	lastShortUrl = shortenUrl(lastFullUrl);
+	el[0].value = lastShortUrl;
+
+	console.log(lastFullUrl, lastShortUrl);
+
 	if (issue && issue.id) {
 		starBox.removeClass('disabled');
 		starsDB.getById(issue.id).then(res => {
 			starBox.toggleClass('is-starred', !!res);
 		});
 	}
+}
+
 
-	if (hasUrlChanged) el[0].select();
+function shortenUrl (url = '') {
+	return url
+		.replace(config.get('baseUrl'), '')
+		.replace('pull/', '')
+		.replace('issues/', '')
+		.split('#')
+		.shift();
+}
+
+function focusAddressbar () {
+	setTimeout(() => { el[0].select(); }, 10);
 }
 
 
-function getCustomAddress (url) {
-	return url.replace(config.get('baseUrl'), '').replace('pull/', '').replace('issues/', '');
+
+function onFocus () {
+	el[0].value = lastFullUrl;
+	el[0].select();
 }
 
+function onBlur () {
+	el[0].value = lastShortUrl;
+}
 
 function onKeyDown (e) {
 	if (e.key === 'ArrowDown') return $.trigger('focus-address-results');
 	if (e.key === 'Escape') {
-		e.target.value = lastUrl;
+		e.target.value = lastFullUrl;
 		e.target.select();
 		$.trigger('address-input-end');
 	}
@@ -73,8 +93,12 @@ function onKeyPress (e) {
 	if (e.key === 'Enter') return gotoUrl();
 }
 
-function focusAddressbar () {
-	setTimeout(() => { el[0].select(); }, 10);
+function onInput (e) {
+	$.trigger('address-input', e);
+}
+
+function onMenuClick (target) {
+	if (target === 'focus-addressbar') focusAddressbar();
 }
 
 
@@ -84,14 +108,16 @@ function init () {
 	el = $('.addressbar');
 	starBox = $('header .star-box');
 
-	el.on('focus', e => { e.target.select(); });
+	el.on('focus', onFocus);
+	el.on('blur', onBlur);
 	el.on('keydown', onKeyDown);
 	el.on('keypress', onKeyPress);
-	el.on('input', e => { $.trigger('address-input', e); });
+	el.on('input', onInput);
 
 	$.on('change-url', gotoUrl);
 	$.on('url-changed', onUrlChanged);
 	$.on('focus-addressbar', focusAddressbar);
+	$.on('menu', onMenuClick);
 
 	isReady = true;
 }

app/app.js

@@ -28,6 +28,16 @@ const { ipcRenderer } = require('electron');
 ipcRenderer.on('menu', (ev, msg) => { $.trigger('menu', msg); });
 
 
-window.addEventListener('blur', () => document.body.classList.add('window-inactive'));
-window.addEventListener('focus', () => document.body.classList.remove('window-inactive'));
-document.addEventListener('click', e => $.trigger('document-clicked', e));
+window.addEventListener('blur', () => {
+	document.body.classList.add('window-inactive');
+	$.trigger('window-blurred');
+});
+
+window.addEventListener('focus', () => {
+	document.body.classList.remove('window-inactive');
+	$.trigger('window-focused');
+});
+
+document.addEventListener('click', e => {
+	$.trigger('document-clicked', e);
+});

app/frame/index.js

@@ -93,6 +93,7 @@ function loadingStart () {
 function loadingStop () {
 	webview.removeClass('loading');
 	$.trigger('url-change-end');
+	webview[0].focus();
 }
 
 

app/history/index.css

@@ -1,4 +1,4 @@
-.addressbar-results {
+.history {
 	position: absolute;
 	left: 0;
 	right: 0;
@@ -13,15 +13,16 @@
 	display: none;
 }
 
-.addressbar-results.visible { opacity: 1; }
+.history.visible { opacity: 1; }
 
 
-.addressbar-results-list {
+.history-list {
 	width: 100%;
 	height: 100%;
 	padding: 10px 0;
 	border: none;
 	font: inherit;
 }
+.history-list:focus { outline: none; }
 
-.addressbar-results-list option { padding: 5px 90px 5px 179px; }
+.history-list option { padding: 5px 90px 5px 179px; }

app/history/index.js

@@ -37,7 +37,9 @@ function getItemHtml (item, i) {
 function render (items) {
 	if (items.length) show();
 	else hide();
+	items = items.slice(0, 20);
 	listEl.html(items.map(getItemHtml).join(''));
+	el[0].style.height = `${items.length * 27 + 20}px`;
 }
 
 function onAddressInput (e) {
@@ -66,16 +68,16 @@ function focusResults () {
 
 
 function onDocumentClick (e) {
-	if (e && e.target && $(e.target).closest('.addressbar-results-list')) return;
+	if (e && e.target && $(e.target).closest('.history-list')) return;
 	hide();
 }
 
 
 function init () {
 	if (isReady) return;
 
-	el = $('.addressbar-results');
-	listEl = el.find('.addressbar-results-list');
+	el = $('.history');
+	listEl = el.find('.history-list');
 
 	listEl.on('blur', hide);
 	listEl.on('keypress', onKeyPress);

app/notifications/index.css

@@ -1,5 +1,4 @@
 #notifications-sidebar { background-color: #34445E; left: -300px; transition: left .3s ease-out; }
-#notifications-sidebar webview { display: block; }
 #notifications-sidebar.visible { left: 0; }
 #notifications-sidebar .js-refresh { position: absolute; top: 2px; right: 35px; z-index: 100; }
 #notifications-sidebar .js-refresh:hover { color: lightblue; }

app/notifications/index.js

@@ -107,8 +107,6 @@ function init () {
 	$.on('menu', onMenuClick);
 	$.on('url-change-end', onFrameUrlChanged);
 
-
-
 	toggle(config.get('state.notifications'));
 
 

app/sidebar/index.js

@@ -32,7 +32,7 @@ function onClick (e) {
 function getIssueHtml (issue) {
 	return `<li>
 		<i class="${issueTypes[issue.type]}"></i>
-		<a href="${issue.repo}/${issue.id}" class="btn">${issue.name}</a>
+		<a href="${issue.repo}/${issue.id}" class="btn" title="${issue.id}">${issue.name}</a>
 		<em>${issue.id}</em>
 	</li>`;
 }

index.html

@@ -33,11 +33,11 @@
 
 					<input class="addressbar" autofocus />
 					<i class="header-btn js-sync ion-ios-nuclear"></i>
-					<div class="addressbar-results"><select class="addressbar-results-list" size="2"></select></div>
+					<div class="history"><select class="history-list" size="2"></select></div>
 				</div>
 
 				<a href="#" class="header-btn js-copy ion-md-link" title="Copy link" data-go="copy"></a>
-				<a href="#" class="header-btn js-browser ion-md-compass" title="Open in browser" data-go="browser"></a>
+				<a href="#" class="header-btn js-browser ion-md-open" title="Open in browser" data-go="browser"></a>
 			</div>
 			<div class="main-header-border"></div>
 			<div class="search-bar hidden">

index.js

@@ -41,6 +41,13 @@ const menuTemplate = [
 		label: 'View',
 		submenu: [
 			{ role: 'reload' },
+			{
+				label: 'Focus address bar',
+				accelerator: 'CmdOrCtrl+L',
+				click () { win.webContents.send('menu', 'focus-addressbar'); }
+			},
+
+			{ type: 'separator' },
 			{ role: 'toggledevtools' },
 			{
 				label: 'Toggle Main Frame Developer Tools',

package.json

@@ -2,23 +2,23 @@
   "name": "github-browser",
   "productName": "Github Browser",
   "description": "Github browser.",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/tborychowski/github-browser.git"
   },
   "scripts": {
     "start": "electron index.js",
-    "package": "electron-packager . --icon './assets/icon.icns' --overwrite --platform=darwin"
+    "pack": "electron-packager . --icon './assets/icon.icns' --overwrite --platform=darwin"
   },
   "author": "Tom",
   "license": "MIT",
   "dependencies": {
     "electron-config": "^0.2.1",
     "electron-window-state": "^4.0.1",
     "ionicons": "^3.0.0",
-    "tingodb": "^0.4.2"
+    "tingodb": "^0.5.1"
   },
   "devDependencies": {
     "electron-packager": "^8.3.0",