design: Only show the back button when needed.

Fixes: #421.

app/renderer/css/main.css

@@ -101,6 +101,18 @@ body {
     color: #98a9b3;
 }
 
+.action-button.disable {
+    opacity: 0.6;
+}
+
+.action-button.disable:hover {
+    cursor: not-allowed;
+}
+
+.action-button.disable:hover i {
+    color: #6c8592;
+}
+
 .tab:first-child {
     margin-top: 8px;
 }

app/renderer/js/components/webview.js

@@ -69,6 +69,18 @@ class WebView extends BaseComponent {
 			this.props.onTitleChange();
 		});
 
+		this.$el.addEventListener('did-navigate-in-page', event => {
+			const isSettingPage = event.url.includes('renderer/preference.html');
+			if (isSettingPage) {
+				return;
+			}
+			this.canGoBackButton();
+		});
+
+		this.$el.addEventListener('did-navigate', () => {
+			this.canGoBackButton();
+		});
+
 		this.$el.addEventListener('page-favicon-updated', event => {
 			const { favicons } = event;
 			// This returns a string of favicons URL. If there is a PM counts in unread messages then the URL would be like
@@ -183,6 +195,15 @@ class WebView extends BaseComponent {
 		}
 	}
 
+	canGoBackButton() {
+		const $backButton = document.querySelector('#actions-container #back-action');
+		if (this.$el.canGoBack()) {
+			$backButton.classList.remove('disable');
+		} else {
+			$backButton.classList.add('disable');
+		}
+	}
+
 	forward() {
 		if (this.$el.canGoForward()) {
 			this.$el.goForward();

app/renderer/js/main.js

@@ -284,6 +284,12 @@ class ServerManagerView {
 			}
 		}
 
+		try {
+			this.tabs[index].webview.canGoBackButton();
+		} catch (err) {
+			console.log(err);
+		}
+
 		this.activeTabIndex = index;
 		this.tabs[index].activate();
 

app/renderer/main.html

@@ -28,7 +28,7 @@
         <i class="material-icons md-48">refresh</i>
         <span id="reload-tooltip" style="display:none">Reload</span>
       </div>
-      <div class="action-button" id="back-action">
+      <div class="action-button disable" id="back-action">
         <i class="material-icons md-48">arrow_back</i>
         <span id="back-tooltip" style="display:none">Go Back</span>
       </div>