Add ForwardButton to Sidebar

Signed-off-by: tarun8718 <[email protected]>

Author: tarun8718

app/renderer/css/main.css

@@ -343,6 +343,7 @@ webview.focus {
 #loading-tooltip,
 #dnd-tooltip,
 #back-tooltip,
+#forward-tooltip,
 #reload-tooltip,
 #setting-tooltip {
     font-family: sans-serif;
@@ -362,6 +363,7 @@ webview.focus {
 #loading-tooltip::after,
 #dnd-tooltip::after,
 #back-tooltip::after,
+#forward-tooltip::after,
 #reload-tooltip::after,
 #setting-tooltip::after {
     content: " ";

app/renderer/js/components/webview.ts

@@ -106,10 +106,12 @@ export default class WebView extends BaseComponent {
 			}
 
 			this.canGoBackButton();
+			this.canGoForwardButton();
 		});
 
 		this.$el.addEventListener('did-navigate', () => {
 			this.canGoBackButton();
+			this.canGoForwardButton();
 		});
 
 		this.$el.addEventListener('page-favicon-updated', event => {
@@ -294,6 +296,16 @@ export default class WebView extends BaseComponent {
 	forward(): void {
 		if (this.$el.canGoForward()) {
 			this.$el.goForward();
+			this.focus();
+		}
+	}
+
+	canGoForwardButton(): void {
+		const $backButton = document.querySelector('#actions-container #forward-action');
+		if (this.$el.canGoForward()) {
+			$backButton.classList.remove('disable');
+		} else {
+			$backButton.classList.add('disable');
 		}
 	}
 

app/renderer/js/main.ts

@@ -76,13 +76,15 @@ class ServerManagerView {
 	$settingsButton: HTMLButtonElement;
 	$webviewsContainer: Element;
 	$backButton: HTMLButtonElement;
+	$forwardButton: HTMLButtonElement;
 	$dndButton: HTMLButtonElement;
 	$addServerTooltip: HTMLElement;
 	$reloadTooltip: HTMLElement;
 	$loadingTooltip: HTMLElement;
 	$settingsTooltip: HTMLElement;
 	$serverIconTooltip: HTMLCollectionOf<HTMLElement>;
 	$backTooltip: HTMLElement;
+	$forwardTooltip: HTMLElement;
 	$dndTooltip: HTMLElement;
 	$sidebar: Element;
 	$fullscreenPopup: Element;
@@ -103,6 +105,7 @@ class ServerManagerView {
 		this.$settingsButton = $actionsContainer.querySelector('#settings-action');
 		this.$webviewsContainer = document.querySelector('#webviews-container');
 		this.$backButton = $actionsContainer.querySelector('#back-action');
+		this.$forwardButton = $actionsContainer.querySelector('#forward-action');
 		this.$dndButton = $actionsContainer.querySelector('#dnd-action');
 
 		this.$addServerTooltip = document.querySelector('#add-server-tooltip');
@@ -117,6 +120,7 @@ class ServerManagerView {
 		// eslint-disable-next-line unicorn/prefer-query-selector
 		this.$serverIconTooltip = document.getElementsByClassName('server-tooltip') as HTMLCollectionOf<HTMLElement>;
 		this.$backTooltip = $actionsContainer.querySelector('#back-tooltip');
+		this.$forwardTooltip = $actionsContainer.querySelector('#forward-tooltip');
 		this.$dndTooltip = $actionsContainer.querySelector('#dnd-tooltip');
 
 		this.$sidebar = document.querySelector('#sidebar');
@@ -423,6 +427,9 @@ class ServerManagerView {
 		this.$settingsButton.addEventListener('click', async () => {
 			await this.openSettings('General');
 		});
+		this.$forwardButton.addEventListener('click', () => {
+			this.tabs[this.activeTabIndex].webview.forward();
+		});
 		this.$backButton.addEventListener('click', () => {
 			this.tabs[this.activeTabIndex].webview.back();
 		});
@@ -431,6 +438,7 @@ class ServerManagerView {
 		this.sidebarHoverEvent(this.$loadingIndicator, this.$loadingTooltip);
 		this.sidebarHoverEvent(this.$settingsButton, this.$settingsTooltip);
 		this.sidebarHoverEvent(this.$reloadButton, this.$reloadTooltip);
+		this.sidebarHoverEvent(this.$forwardButton, this.$forwardTooltip);
 		this.sidebarHoverEvent(this.$backButton, this.$backTooltip);
 		this.sidebarHoverEvent(this.$dndButton, this.$dndTooltip);
 	}
@@ -628,6 +636,7 @@ class ServerManagerView {
 
 		try {
 			this.tabs[index].webview.canGoBackButton();
+			this.tabs[index].webview.canGoForwardButton();
 		} catch {}
 
 		this.activeTabIndex = index;

app/renderer/main.html

@@ -36,6 +36,10 @@
                         <i class="refresh material-icons md-48">loop</i>
                         <span id="loading-tooltip" style="display:none">Loading</span>
                     </div>
+                    <div class="action-button disable" id="forward-action">
+                        <i class="material-icons md-48">arrow_forward</i>
+                        <span id="forward-tooltip" style="display:none">Go Forward</span>
+                    </div>
                     <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>