Revert "Navigation history dropdowns (FreeTubeApp#5227)"

This reverts commit 0eb8271.
Incompatible with Electron 26

Author: OothecaPickle

src/constants.js

@@ -5,10 +5,6 @@ const IpcChannels = {
   OPEN_EXTERNAL_LINK: 'open-external-link',
   GET_SYSTEM_LOCALE: 'get-system-locale',
   GET_PICTURES_PATH: 'get-pictures-path',
-  GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX: 'get-navigation-history-entry-at-index',
-  GET_NAV_HISTORY_ACTIVE_INDEX: 'get-navigation-history-active-index',
-  GET_NAV_HISTORY_LENGTH: 'get-navigation-history-length',
-  GO_TO_NAV_HISTORY_OFFSET: 'go-to-navigation-history-index',
   SHOW_OPEN_DIALOG: 'show-open-dialog',
   SHOW_SAVE_DIALOG: 'show-save-dialog',
   STOP_POWER_SAVE_BLOCKER: 'stop-power-save-blocker',

src/main/index.js

@@ -897,26 +897,6 @@ function runApp() {
     session.defaultSession.closeAllConnections()
   })
 
-  // #region navigation history
-
-  ipcMain.on(IpcChannels.GO_TO_NAV_HISTORY_OFFSET, ({ sender }, offset) => {
-    sender.navigationHistory.goToOffset(offset)
-  })
-
-  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX, async ({ sender }, index) => {
-    return sender.navigationHistory.getEntryAtIndex(index)?.title
-  })
-
-  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ACTIVE_INDEX, async ({ sender }) => {
-    return sender.navigationHistory.getActiveIndex()
-  })
-
-  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_LENGTH, async ({ sender }) => {
-    return sender.navigationHistory.length()
-  })
-
-  // #endregion navigation history
-
   ipcMain.handle(IpcChannels.OPEN_EXTERNAL_LINK, (_, url) => {
     if (typeof url === 'string') {
       let parsedURL

src/renderer/App.js

@@ -97,7 +97,6 @@ export default defineComponent({
     externalPlayer: function () {
       return this.$store.getters.getExternalPlayer
     },
-
     defaultInvidiousInstance: function () {
       return this.$store.getters.getDefaultInvidiousInstance
     },
@@ -145,10 +144,6 @@ export default defineComponent({
       return this.$store.getters.getExternalLinkHandling
     },
 
-    appTitle: function () {
-      return this.$store.getters.getAppTitle
-    },
-
     openDeepLinksInNewWindow: function () {
       return this.$store.getters.getOpenDeepLinksInNewWindow
     }
@@ -163,11 +158,10 @@ export default defineComponent({
     secColor: 'checkThemeSettings',
 
     locale: 'setLocale',
-
-    appTitle: 'setDocumentTitle'
   },
   created () {
     this.checkThemeSettings()
+    this.setWindowTitle()
     this.setLocale()
   },
   mounted: function () {
@@ -213,16 +207,10 @@ export default defineComponent({
         if (this.$router.currentRoute.path === '/') {
           this.$router.replace({ path: this.landingPage })
         }
-
-        this.setWindowTitle()
       })
     })
   },
   methods: {
-    setDocumentTitle: function(value) {
-      document.title = value
-      this.$nextTick(() => this.$refs.topNav?.setActiveNavigationHistoryEntryTitle(value))
-    },
     checkThemeSettings: function () {
       const theme = {
         baseTheme: this.baseTheme || 'dark',
@@ -551,7 +539,7 @@ export default defineComponent({
 
     setWindowTitle: function() {
       if (this.windowTitle !== null) {
-        this.setAppTitle(this.windowTitle)
+        document.title = this.windowTitle
       }
     },
 
@@ -574,7 +562,6 @@ export default defineComponent({
       'getExternalPlayerCmdArgumentsData',
       'fetchInvidiousInstances',
       'fetchInvidiousInstancesFromFile',
-      'setAppTitle',
       'setRandomCurrentInvidiousInstance',
       'setupListenersToSyncWindows',
       'updateBaseTheme',

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -2,8 +2,6 @@ import { defineComponent, nextTick } from 'vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
-const LONG_CLICK_BOUNDARY_MS = 500
-
 export default defineComponent({
   name: 'FtIconButton',
   components: {
@@ -57,27 +55,21 @@ export default defineComponent({
     dropdownOptions: {
       // Array of objects with these properties
       // - type: ('labelValue'|'divider', default to 'labelValue' for less typing)
-      // - label: String (if type === 'labelValue')
-      // - value: String (if type === 'labelValue')
-      // - (OPTIONAL) active: Number (if type === 'labelValue')
+      // - label: String (if type == 'labelValue')
+      // - value: String (if type == 'labelValue')
       type: Array,
       default: () => { return [] }
     },
     dropdownModalOnMobile: {
       type: Boolean,
       default: false
-    },
-    openOnRightOrLongClick: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['click', 'disabled-click'],
   data: function () {
     return {
       dropdownShown: false,
-      blockLeftClick: false,
-      longPressTimer: null,
+      mouseDownOnIcon: false,
       useModal: false
     }
   },
@@ -99,24 +91,14 @@ export default defineComponent({
       this.dropdownShown = false
     },
 
-    handleIconClick: function (e, isRightOrLongClick = false) {
+    handleIconClick: function () {
       if (this.disabled) {
         this.$emit('disabled-click')
         return
       }
-
-      if (this.blockLeftClick) {
-        return
-      }
-
-      if (this.longPressTimer != null) {
-        clearTimeout(this.longPressTimer)
-        this.longPressTimer = null
-      }
-
-      if ((!this.openOnRightOrLongClick || (this.openOnRightOrLongClick && isRightOrLongClick)) &&
-       (this.forceDropdown || this.dropdownOptions.length > 0)) {
+      if (this.forceDropdown || (this.dropdownOptions.length > 0)) {
         this.dropdownShown = !this.dropdownShown
+
         if (this.dropdownShown && !this.useModal) {
           // wait until the dropdown is visible
           // then focus it so we can hide it automatically when it loses focus
@@ -129,38 +111,24 @@ export default defineComponent({
       }
     },
 
-    handleIconPointerDown: function (event) {
-      if (!this.openOnRightOrLongClick) { return }
-      if (event.button === 2) { // right button click
-        this.handleIconClick(null, true)
-      } else if (event.button === 0) { // left button click
-        this.longPressTimer = setTimeout(() => {
-          this.handleIconClick(null, true)
-
-          // prevent a long press that ends on the icon button from firing the handleIconClick handler
-          window.addEventListener('pointerup', this.preventButtonClickAfterLongPress, { once: true })
-          window.addEventListener('pointercancel', () => {
-            window.removeEventListener('pointerup', this.preventButtonClickAfterLongPress)
-          }, { once: true })
-        }, LONG_CLICK_BOUNDARY_MS)
+    handleIconMouseDown: function () {
+      if (this.disabled) { return }
+      if (this.dropdownShown) {
+        this.mouseDownOnIcon = true
       }
     },
 
-    // prevent the handleIconClick handler from firing for an instant
-    preventButtonClickAfterLongPress: function () {
-      this.blockLeftClick = true
-      setTimeout(() => { this.blockLeftClick = false }, 0)
-    },
-
     handleDropdownFocusOut: function () {
-      if (this.dropdownShown && !this.$refs.ftIconButton.matches(':focus-within')) {
+      if (this.mouseDownOnIcon) {
+        this.mouseDownOnIcon = false
+      } else if (!this.$refs.dropdown.matches(':focus-within')) {
         this.dropdownShown = false
       }
     },
 
     handleDropdownEscape: function () {
-      this.dropdownShown = false
-      this.$refs.ftIconButton.firstElementChild.focus()
+      this.$refs.iconButton.focus()
+      // handleDropdownFocusOut will hide the dropdown for us
     },
 
     handleDropdownClick: function ({ url, index }) {

src/renderer/components/ft-icon-button/ft-icon-button.scss

@@ -4,7 +4,6 @@
   flex-flow: row wrap;
   justify-content: space-evenly;
   position: relative;
-  line-height: normal;
   user-select: none;
 }
 
@@ -25,13 +24,12 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible,
-      &.pressed {
+      &:focus-visible {
         background-color: var(--side-nav-hover-color);
         color: var(--side-nav-hover-text-color);
       }
 
-      &.active {
+      &:active {
         background-color: var(--side-nav-active-color);
         color: var(--side-nav-active-text-color);
       }
@@ -40,13 +38,12 @@
 
   &.base-no-default:not(.disabled) {
     &:hover,
-    &:focus-visible,
-    &.pressed {
+    &:focus-visible {
       background-color: var(--side-nav-hover-color);
       color: var(--side-nav-hover-text-color);
     }
 
-    &.active {
+    &:active {
       background-color: var(--side-nav-active-color);
       color: var(--side-nav-active-text-color);
     }
@@ -58,12 +55,11 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible,
-      &.pressed {
+      &:focus-visible {
         background-color: var(--primary-color-hover);
       }
 
-      &.active {
+      &:active {
         background-color: var(--primary-color-active);
       }
     }
@@ -76,12 +72,11 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible,
-      &.pressed {
+      &:focus-visible {
         background-color: var(--accent-color-hover);
       }
 
-      &.active {
+      &:active {
         background-color: var(--accent-color-active);
       }
     }
@@ -93,12 +88,11 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible,
-      &.pressed {
+      &:focus-visible {
         background-color: var(--destructive-hover-color);
       }
 
-      &.active {
+      &:active {
         background-color: var(--destructive-active-color);
       }
     }
@@ -156,17 +150,6 @@
     padding: 0;
   }
 
-  :has(.active) {
-    .checkmarkColumn {
-      min-inline-size: 12px;
-    }
-
-    .listItem {
-      display: flex;
-      gap: 6px;
-    }
-  }
-
   .listItem {
     cursor: pointer;
     margin: 0;
@@ -176,20 +159,12 @@
     white-space: nowrap;
 
     &:hover,
-    &:focus-visible,
-    &.pressed,
-    &.active {
+    &:focus-visible {
       background-color: var(--side-nav-hover-color);
       color: var(--side-nav-hover-text-color);
       transition: background 0.2s ease-in;
     }
 
-    &.active {
-      font-weight: 600;
-      display: flex;
-      gap: 6px;
-    }
-
     &:active {
       background-color: var(--side-nav-active-color);
       color: var(--side-nav-active-text-color);