Add scroll hints.

file-scroll.js

@@ -4,11 +4,40 @@ const getFileElements = () => getClassNameElementsArray('file')
 
 const getSelectedFile = () => getClassNameElementsArray('file-selected')[0]
 
-const changeFile = e => {
-    const up = e.wheelDelta ? e.wheelDelta > 0 : e.deltaY < 0
+const addScrollHints = () => {
+    getClassNameElementsArray('sages-extra-breadcrumbs').forEach(e => e.parentNode.removeChild(e))
+    const buildHint = (fileElement, prefix, top) => {
+        const hint = document.createElement('div', {})
+        hint.classList.add('sages-extra-breadcrumbs')
+        if (fileElement.classList.contains('file-viewed')) {
+            hint.classList.add('sages-extra-breadcrumbs-viewed')
+        }
+        hint.innerText = `${prefix} ${decodeURIComponent(fileElement.firstElementChild.href.split('#')[1])}`
+        if (top) {
+            hint.style.top = top
+        }
+        return hint;
+    }
     const selectedFile = getSelectedFile()
     const fileElements = getFileElements()
     const index = fileElements.indexOf(selectedFile)
+    const breadcrumbs = Array.from(getChangeHeader().getElementsByTagName('h4'))[0]
+    console.log({ breadcrumbs })
+    if (index > 0) {
+        breadcrumbs.prepend(buildHint(fileElements[index - 1], 'Prev:', '2.1em'))
+    }
+    if (index < fileElements.length - 1) {
+        breadcrumbs.appendChild(buildHint(fileElements[index + 1], 'Next:'))
+    }
+
+}
+
+const changeFile = e => {
+    const selectedFile = getSelectedFile()
+    const fileElements = getFileElements()
+
+    const up = e.wheelDelta ? e.wheelDelta > 0 : e.deltaY < 0
+    const index = fileElements.indexOf(selectedFile)
     const nextElement =
         (up && index > 0) ? fileElements[index - 1] :
         (!up && index < (fileElements.length - 1)) ? fileElements[index + 1] :
@@ -17,8 +46,29 @@ const changeFile = e => {
     nextElement?.firstElementChild?.click()
 }
 
+let styled = false
 addFix(() => {
     const header = getChangeHeader()
-    console.log({ header })
     header.onwheel = changeFile
+    styled || addStyle(`
+      .sages-extra-breadcrumbs {
+        color: rgba(0, 0, 0, 0) !important;
+        margin-top: -2em !important;
+        /*margin-bottom: -1em !important;*/
+        float: left !important;
+        position: absolute;
+        font-size: 11px;
+        margin-left: 35%;
+      }
+      .diff-meta:hover h4 .sages-extra-breadcrumbs {
+        color: rgba(0, 0, 0, 0.35) !important;
+      }
+      .diff-meta:hover h4 .sages-extra-breadcrumbs-viewed {
+        color: rgba(0, 0, 0, 0.2) !important;
+      }
+    `)
+    styled = true
 })
+
+window.addEventListener('load', () => setTimeout(addScrollHints, NEW_PAGE_DELAY))
+addEventListener('hashchange', () => setTimeout(addScrollHints, 100))

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Sage's BitBucket Addon",
   "description": "Ensure searches don't include forks (and other enhancements)",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "manifest_version": 2,
   "browser_specific_settings": {
     "gecko": {

utils.js

@@ -15,3 +15,9 @@ const getFileName = () => getClassNameElementsArray('file-breadcrumbs-segment-hi
 const getCurrentUser = () => {
     return getClassNameElementsArray("user-dropdown-trigger")[0].title.replace(/(.*\()|\)/g, '')
 }
+
+const addStyle = css => {
+    const styleElement = document.createElement('style')
+    styleElement.innerText = css.replaceAll("\n", " ")
+    document.head.appendChild(styleElement)
+}