Preserve timeline position on update

_locales/en/messages.json

@@ -395,6 +395,7 @@
     "copy_tweet_links_as": { "message": "Copy tweet links as", "example": "->Copy links as<- vxtwitter.com" },
     "use_new_icon": { "message": "Use new logo as tab icon" },
     "update_timeline_automatically": { "message": "Update timeline automatically on new tweets." },
+    "keep_timeline_position": { "message": "Keep timeline position on update." },
     "chrono_no_retweets": { "message": "Reverse chronological (no retweets)" },
     "chrono_retweets": { "message": "Reverse chronological (only retweets)" },
     "hide_trends": { "message": "Hide trends" },

_locales/ru/messages.json

@@ -408,6 +408,7 @@
     "copy_tweet_links_as": { "message": "Копировать ссылки на твиты как", "example": "->Копировать ссылки как<- vxtwitter.com" },
     "use_new_icon": { "message": "Использовать новый логотип для иконки вкладок" },
     "update_timeline_automatically": { "message": "Обновлять ленту автоматически при новых твитах." },
+    "keep_timeline_position": { "message": "Сохранять позицию ленты при новых твитах." },
     "chrono_no_retweets": { "message": "Хронологическая (без ретвитов)" },
     "chrono_retweets": { "message": "Хронологическая (только ретвиты)" },
     "hide_trends": { "message": "Не показывать тренды" },

layouts/home/script.js

@@ -340,7 +340,16 @@ async function renderTimeline(options = {}) {
         }
     };
     if(options.mode === 'prepend' && toRender.length > 0) {
+        let root = document.documentElement;
+        let lastScrollHeight = root.scrollHeight;
+        let lastScrollTop = root.scrollTop;
+
         timelineContainer.prepend(...toRender);
+
+        if (vars.keepTimelinePosition) {
+            root.scrollTop = lastScrollTop + (root.scrollHeight - lastScrollHeight);
+        }
+
         if(vars.enableTwemoji) {
             for(let t in toRender) {
                 twemoji.parse(toRender[t]);

layouts/settings/index.html

@@ -227,6 +227,9 @@ <h2>__MSG_advanced_options__</h2><br>
                     <div class="setting">
                         <input type="checkbox" id="update-timeline-automatically"> <label for="update-timeline-automatically">__MSG_update_timeline_automatically__</label>
                     </div>
+                    <div class="setting">
+                        <input type="checkbox" id="keep-timeline-position"> <label for="keep-timeline-position">__MSG_keep_timeline_position__</label>
+                    </div>
                     <div class="setting" id="enable-iframe-navigation-div">
                         <input type="checkbox" id="enable-iframe-navigation"> <label for="enable-iframe-navigation">__MSG_enable_iframe_navigation__</label>
                     </div>

layouts/settings/script.js

@@ -295,6 +295,7 @@ setTimeout(async () => {
     let copyLinksAs = document.getElementById('copy-links-as');
     let useNewIcon = document.getElementById('use-new-icon');
     let updateTimelineAutomatically = document.getElementById('update-timeline-automatically');
+    let keepTimelinePosition = document.getElementById('keep-timeline-position');
     let hideTrends = document.getElementById('hide-trends');
     let hideWtf = document.getElementById('hide-wtf');
     let hideLikes = document.getElementById('hide-likes');
@@ -685,6 +686,11 @@ setTimeout(async () => {
             updateTimelineAutomatically: updateTimelineAutomatically.checked
         }, () => { });
     });
+    keepTimelinePosition.addEventListener('change', () => {
+        chrome.storage.sync.set({
+            keepTimelinePosition: keepTimelinePosition.checked
+        }, () => { });
+    });
     roundAvatars.addEventListener('change', () => {
         chrome.storage.sync.set({
             roundAvatars: roundAvatars.checked
@@ -1072,6 +1078,7 @@ setTimeout(async () => {
     developerMode.checked = !!vars.developerMode;
     useNewIcon.checked = !!vars.useNewIcon;
     updateTimelineAutomatically.checked = !!vars.updateTimelineAutomatically;
+    keepTimelinePosition.checked = !!vars.keepTimelinePosition;
     hideTrends.checked = !!vars.hideTrends;
     hideWtf.checked = !!vars.hideWtf;
     hideLikes.checked = !!vars.hideLikes;

scripts/config.js

@@ -93,6 +93,7 @@ async function loadVars() {
                 "copyLinksAs",
                 "useNewIcon",
                 "updateTimelineAutomatically",
+                "keepTimelinePosition",
                 "hideTrends",
                 "hideWtf",
                 "hideLikes",