more work on trying to get focus saving to work

routes/_components/status/Status.html

@@ -141,6 +141,7 @@
             parentElement.parentElement.localName !== 'button') {
           e.preventDefault()
           e.stopPropagation()
+          this.store.setForCurrentTimeline({ignoreBlurEvents: true})
           goto(`/statuses/${this.get('statusId')}`)
         }
       }

routes/_components/status/StatusAuthorName.html

@@ -1,5 +1,7 @@
 <a class="status-author-name {{isStatusInNotification ? 'status-in-notification' : '' }} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}"
-   href="/accounts/{{status.account.id}}">
+   href="/accounts/{{status.account.id}}"
+   focus-key="{{focusKey}}"
+>
   {{status.account.display_name || status.account.username}}
 </a>
 <style>
@@ -31,27 +33,10 @@
 
 </style>
 <script>
-  import IntlRelativeFormat from 'intl-relativeformat'
-  import ExternalLink from '../ExternalLink.html'
-  import { mark, stop } from '../../_utils/marks'
-
-  const relativeFormat = new IntlRelativeFormat('en-US');
-
   export default {
-    helpers: {
-      getClass: isStatusInNotification => isStatusInNotification ? 'status-author-in-notification' : ''
-    },
     computed: {
-      createdAtDate: (status) => status.created_at,
+      statusId: (status) => status.id,
-      relativeDate: (createdAtDate) => {
+      focusKey: (statusId) => `status-author-name-${statusId}`
-        mark('compute relativeDate')
-        let res = relativeFormat.format(new Date(createdAtDate))
-        stop('compute relativeDate')
-        return res
-      }
-    },
-    components: {
-      ExternalLink
     }
   }
 </script>

routes/_components/status/StatusHeader.html

@@ -3,7 +3,9 @@
     <use xlink:href="{{getIcon(notification, status)}}"/>
   </svg>
   <span>
-    <a href="/accounts/{{getAccount(notification, status).id}}">
+    <a href="/accounts/{{getAccount(notification, status).id}}"
+       focus-key="{{focusKey}}"
+    >
       {{getAccount(notification, status).display_name || ('@' + getAccount(notification, status).username)}}
     </a>
     {{#if notification && notification.type === 'reblog'}}
@@ -62,6 +64,10 @@
 </style>
 <script>
   export default {
+    computed: {
+      statusId: (status) => status.id,
+      focusKey: (statusId) => `status-header-${statusId}`
+    },
     helpers: {
       getIcon(notification, status) {
         if ((notification && notification.type === 'reblog') || (status && status.reblog)) {

routes/_components/status/StatusRelativeDate.html

@@ -1,5 +1,7 @@
 <a class="status-relative-date {{isStatusInNotification ? 'status-in-notification' : '' }}"
-   href="/statuses/{{status.id}}">
+   href="/statuses/{{status.id}}"
+   focus-key="{{focusKey}}"
+>
   <time datetime={{createdAtDate}} title="{{relativeDate}}" aria-label="{{relativeDate}} – click to show thread">{{relativeDate}}</time>
 </a>
 <style>
@@ -32,12 +34,14 @@
   export default {
     computed: {
       createdAtDate: (status) => status.created_at,
+      statusId: (status) => status.id,
       relativeDate: (createdAtDate) => {
         mark('compute relativeDate')
         let res = relativeFormat.format(new Date(createdAtDate))
         stop('compute relativeDate')
         return res
-      }
+      },
+      focusKey: (statusId) => `status-relative-date-${statusId}`
     }
   }
 </script>

routes/_components/timeline/Timeline.html

@@ -65,9 +65,9 @@
   export default {
     oncreate() {
       console.log('timeline oncreate()')
+      this.store.setForCurrentTimeline({ignoreBlurEvents: false})
       setupTimeline()
       if (this.store.get('initialized')) {
-        console.log('initialized!!!!')
         this.restoreFocus()
       }
     },
@@ -159,12 +159,15 @@
         })
       },
       clearFocus() {
-        /*console.log('clearing focus')
+        if (this.store.get('ignoreBlurEvents')) {
+          return
+        }
+        console.log('clearing focus')
         let instanceName = this.store.get('currentInstance')
         let timelineName = this.get('timeline')
         this.store.setForTimeline(instanceName, timelineName, {
           lastFocusedElementSelector: null
-        })*/
+        })
       },
       restoreFocus() {
         let lastFocusedElementSelector = this.store.get('lastFocusedElementSelector')

routes/_store/mixins.js

@@ -12,6 +12,12 @@ function timelineMixins (Store) {
     let timelineData = timelines[instanceName] || {}
     return (timelineData[timelineName] || {})[key]
   }
+
+  Store.prototype.setForCurrentTimeline = function (obj) {
+    let instanceName = this.get('currentInstance')
+    let timelineName = this.get('currentTimeline')
+    this.setForTimeline(instanceName, timelineName, obj)
+  }
 }
 
 export function mixins (Store) {

routes/_store/timelineComputations.js

@@ -14,6 +14,7 @@ export function timelineComputations (store) {
   computeForTimeline(store, 'runningUpdate')
   computeForTimeline(store, 'initialized')
   computeForTimeline(store, 'lastFocusedElementSelector')
+  computeForTimeline(store, 'ignoreBlurEvents')
 
   store.compute('lastTimelineItemId', ['timelineItemIds'], (timelineItemIds) => timelineItemIds && timelineItemIds.length && timelineItemIds[timelineItemIds.length - 1])
 }