docs: navigation history example (#42980)

* docs: add fiddle example

* docs: add tutorial guide

* refactor: PR review comments

* refactor: add eof

* refactor: render navigation history and make demo better.

* refactor: fix broken links

* refactor: add eof newline

* docs: review feedback :)

* chore: lint add space around list

* doc: transformURL

docs/fiddles/features/navigation-history/renderer.js

@@ -0,0 +1,84 @@
+const backBtn = document.getElementById('backBtn')
+const forwardBtn = document.getElementById('forwardBtn')
+const backHistoryBtn = document.getElementById('backHistoryBtn')
+const forwardHistoryBtn = document.getElementById('forwardHistoryBtn')
+const urlInput = document.getElementById('urlInput')
+const goBtn = document.getElementById('goBtn')
+const historyPanel = document.getElementById('historyPanel')
+
+async function updateButtons () {
+  const canGoBack = await window.electronAPI.canGoBack()
+  const canGoForward = await window.electronAPI.canGoForward()
+  backBtn.disabled = !canGoBack
+  backHistoryBtn.disabled = !canGoBack
+
+  forwardBtn.disabled = !canGoForward
+  forwardHistoryBtn.disabled = !canGoForward
+}
+
+async function updateURL () {
+  urlInput.value = await window.electronAPI.getCurrentURL()
+}
+
+function transformURL (url) {
+  if (!url.startsWith('http://') && !url.startsWith('https://')) {
+    const updatedUrl = 'https://' + url
+    return updatedUrl
+  }
+  return url
+}
+
+async function navigate (url) {
+  const urlInput = transformURL(url)
+
+  await window.electronAPI.loadURL(urlInput)
+}
+
+async function showHistory (forward = false) {
+  const history = await window.electronAPI.getHistory()
+  const currentIndex = history.findIndex(entry => entry.url === transformURL(urlInput.value))
+
+  if (!currentIndex) {
+    return
+  }
+
+  const relevantHistory = forward
+    ? history.slice(currentIndex + 1)
+    : history.slice(0, currentIndex).reverse()
+
+  historyPanel.innerHTML = ''
+  relevantHistory.forEach(entry => {
+    const div = document.createElement('div')
+    div.textContent = `Title: ${entry.title}, URL: ${entry.url}`
+    div.onclick = () => navigate(entry.url)
+    historyPanel.appendChild(div)
+  })
+
+  historyPanel.style.display = 'block'
+}
+
+backBtn.addEventListener('click', () => window.electronAPI.goBack())
+forwardBtn.addEventListener('click', () => window.electronAPI.goForward())
+backHistoryBtn.addEventListener('click', () => showHistory(false))
+forwardHistoryBtn.addEventListener('click', () => showHistory(true))
+goBtn.addEventListener('click', () => navigate(urlInput.value))
+
+urlInput.addEventListener('keypress', (e) => {
+  if (e.key === 'Enter') {
+    navigate(urlInput.value)
+  }
+})
+
+document.addEventListener('click', (e) => {
+  if (e.target !== historyPanel && !historyPanel.contains(e.target) &&
+    e.target !== backHistoryBtn && e.target !== forwardHistoryBtn) {
+    historyPanel.style.display = 'none'
+  }
+})
+
+window.electronAPI.onNavigationUpdate(() => {
+  updateButtons()
+  updateURL()
+})
+
+updateButtons()