Fix/improve content hiding with "virtual scroller" experiment (AprilS…

…ylph#1213) Co-authored-by: April Sylph <[email protected]>
marcustyphoon · Aug 17, 2023 · af2ab3e · af2ab3e
1 parent 92645e6
commit af2ab3e
Show file tree

Hide file tree

Showing 18 changed files with 112 additions and 98 deletions.
diff --git a/src/scripts/anti_capitalism.js b/src/scripts/anti_capitalism.js
@@ -1,30 +1,36 @@
 import { keyToCss } from '../util/css_map.js';
-import { buildStyle } from '../util/interface.js';
+import { buildStyle, getTimelineItemWrapper } from '../util/interface.js';
 import { pageModifications } from '../util/mutations.js';
 
-const hiddenClass = 'xkit-anti-capitalism-hidden';
+const hiddenAttribute = 'data-anti-capitalism-hidden';
 
 const listTimelineObjectInnerSelector = keyToCss('listTimelineObjectInner');
 
 const styleElement = buildStyle(`
-.${hiddenClass},
+[${hiddenAttribute}] > div,
 ${keyToCss('adTimelineObject', 'instreamAd', 'mrecContainer', 'nativeIponWebAd', 'takeoverBanner')} {
   display: none !important;
 }`
 );
 
 const processVideoCTAs = videoCTAs => videoCTAs
-  .map(videoCTA => videoCTA.closest(listTimelineObjectInnerSelector))
+  .map(getTimelineItemWrapper)
   .filter(Boolean)
-  .forEach(({ classList }) => classList.add(hiddenClass));
+  .forEach(timelineItem => timelineItem.setAttribute(hiddenAttribute, ''));
 
 export const main = async () => {
   document.documentElement.append(styleElement);
-  pageModifications.register(`${listTimelineObjectInnerSelector}:first-child ${keyToCss('videoCTA', 'videoImageCTA')}`, processVideoCTAs);
+  pageModifications.register(
+    `
+      ${listTimelineObjectInnerSelector}:first-child ${keyToCss('videoCTA', 'videoImageCTA')},
+      ${keyToCss('adTimelineObject', 'instreamAd', 'mrecContainer', 'nativeIponWebAd', 'takeoverBanner')}
+    `,
+    processVideoCTAs
+  );
 };
 
 export const clean = async () => {
   pageModifications.unregister(processVideoCTAs);
   styleElement.remove();
-  $(`.${hiddenClass}`).removeClass(hiddenClass);
+  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
 };
diff --git a/src/scripts/mutual_checker.css b/src/scripts/mutual_checker.css
@@ -7,6 +7,6 @@ svg.xkit-mutual-icon {
 	margin-right: 0.5ch;
 }
 
-[data-timeline="/v2/timeline/dashboard"] .xkit-mutual-checker-hidden article {
+[data-timeline="/v2/timeline/dashboard"] [data-mutual-checker-hidden] article {
   display: none;
 }
diff --git a/src/scripts/mutual_checker.js b/src/scripts/mutual_checker.js
@@ -1,4 +1,4 @@
-import { filterPostElements } from '../util/interface.js';
+import { getTimelineItemWrapper, filterPostElements } from '../util/interface.js';
 import { timelineObject } from '../util/react_props.js';
 import { apiFetch } from '../util/tumblr_helpers.js';
 import { primaryBlogName } from '../util/user.js';
@@ -8,7 +8,7 @@ import { dom } from '../util/dom.js';
 import { getPreferences } from '../util/preferences.js';
 
 const mutualIconClass = 'xkit-mutual-icon';
-const hiddenClass = 'xkit-mutual-checker-hidden';
+const hiddenAttribute = 'data-mutual-checker-hidden';
 const mutualsClass = 'from-mutual';
 const postAttributionSelector = `header ${keyToCss('attributionHeaderText')}`;
 
@@ -61,7 +61,7 @@ const addIcons = function (postElements) {
       postElement.classList.add(mutualsClass);
       postAttribution.prepend(icon.cloneNode(true));
     } else if (showOnlyMutuals) {
-      postElement.classList.add(hiddenClass);
+      getTimelineItemWrapper(postElement).setAttribute(hiddenAttribute, '');
     }
   });
 };
@@ -91,7 +91,7 @@ export const clean = async function () {
   onNewPosts.removeListener(addIcons);
 
   $(`.${mutualsClass}`).removeClass(mutualsClass);
-  $(`.${hiddenClass}`).removeClass(hiddenClass);
+  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
   $(`.${mutualIconClass}`).remove();
 };
 

diff --git a/src/scripts/no_recommended/hide_blog_carousels.js b/src/scripts/no_recommended/hide_blog_carousels.js
@@ -1,26 +1,26 @@
 import { keyToCss } from '../../util/css_map.js';
-import { buildStyle } from '../../util/interface.js';
+import { buildStyle, getTimelineItemWrapper } from '../../util/interface.js';
 import { pageModifications } from '../../util/mutations.js';
 
-const hiddenClass = 'xkit-no-recommended-blog-carousels-hidden';
+const hiddenAttribute = 'data-no-recommended-blog-carousels-hidden';
 
 const styleElement = buildStyle(`
-  .${hiddenClass} { position: relative; }
-  .${hiddenClass} > div { visibility: hidden; position: absolute; max-width: 100%; }
-  .${hiddenClass} > div :is(img, video, canvas) { display: none }
+  [${hiddenAttribute}] { position: relative; }
+  [${hiddenAttribute}] > div { visibility: hidden; position: absolute; max-width: 100%; }
+  [${hiddenAttribute}] > div :is(img, video, canvas) { display: none }
 `);
 
 const listTimelineObjectSelector = keyToCss('listTimelineObject');
 const blogCarouselSelector = `${listTimelineObjectSelector} ${keyToCss('blogCarousel')}`;
 
 const hideBlogCarousels = blogCarousels => blogCarousels
-  .map(blogCarousel => blogCarousel.closest(listTimelineObjectSelector))
-  .filter(listTimelineObject =>
-    listTimelineObject.previousElementSibling.querySelector(keyToCss('titleObject'))
+  .map(getTimelineItemWrapper)
+  .filter(timelineItem =>
+    timelineItem.previousElementSibling.querySelector(keyToCss('titleObject'))
   )
-  .forEach(listTimelineObject => {
-    listTimelineObject.classList.add(hiddenClass);
-    listTimelineObject.previousElementSibling.classList.add(hiddenClass);
+  .forEach(timelineItem => {
+    timelineItem.setAttribute(hiddenAttribute, '');
+    timelineItem.previousElementSibling.setAttribute(hiddenAttribute, '');
   });
 
 export const main = async function () {
@@ -31,5 +31,5 @@ export const main = async function () {
 export const clean = async function () {
   pageModifications.unregister(hideBlogCarousels);
   styleElement.remove();
-  $(`.${hiddenClass}`).removeClass(hiddenClass);
+  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
 };
diff --git a/src/scripts/no_recommended/hide_radar.js b/src/scripts/no_recommended/hide_radar.js
@@ -2,14 +2,14 @@ import { pageModifications } from '../../util/mutations.js';
 import { translate } from '../../util/language_data.js';
 import { buildStyle } from '../../util/interface.js';
 
-const hiddenClass = 'xkit-no-recommended-radar-hidden';
+const hiddenAttribute = 'data-no-recommended-radar-hidden';
 
-const styleElement = buildStyle(`.${hiddenClass} { display: none; }`);
+const styleElement = buildStyle(`[${hiddenAttribute}] { display: none; }`);
 
 const checkForRadar = function (sidebarTitles) {
   sidebarTitles
     .filter(h1 => h1.textContent === translate('Radar'))
-    .forEach(h1 => h1.parentNode.classList.add(hiddenClass));
+    .forEach(h1 => h1.parentNode.setAttribute(hiddenAttribute, ''));
 };
 
 export const main = async function () {
@@ -20,5 +20,5 @@ export const main = async function () {
 export const clean = async function () {
   pageModifications.unregister(checkForRadar);
   styleElement.remove();
-  $(`.${hiddenClass}`).removeClass(hiddenClass);
+  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
 };
diff --git a/src/scripts/no_recommended/hide_recommended_blogs.js b/src/scripts/no_recommended/hide_recommended_blogs.js
@@ -3,17 +3,17 @@ import { pageModifications } from '../../util/mutations.js';
 import { translate } from '../../util/language_data.js';
 import { buildStyle } from '../../util/interface.js';
 
-const hiddenClass = 'xkit-no-recommended-blogs-hidden';
+const hiddenAttribute = 'data-no-recommended-blogs-hidden';
 
-const styleElement = buildStyle(`.${hiddenClass} { display: none; }`);
+const styleElement = buildStyle(`[${hiddenAttribute}] { display: none; }`);
 
 const hideDashboardRecommended = function (sidebarTitles) {
   sidebarTitles
     .filter(h1 => h1.textContent === translate('Check out these blogs'))
-    .forEach(h1 => h1.parentNode.classList.add(hiddenClass));
+    .forEach(h1 => h1.parentNode.setAttribute(hiddenAttribute, ''));
 };
 
-const hideTagPageRecommended = topBlogsLists => topBlogsLists.forEach(ul => ul.parentNode.classList.add(hiddenClass));
+const hideTagPageRecommended = topBlogsLists => topBlogsLists.forEach(ul => ul.setAttribute(hiddenAttribute, ''));
 
 export const main = async function () {
   pageModifications.register('aside > div > h1', hideDashboardRecommended);
@@ -28,5 +28,5 @@ export const clean = async function () {
   pageModifications.unregister(hideDashboardRecommended);
   pageModifications.unregister(hideTagPageRecommended);
   styleElement.remove();
-  $(`.${hiddenClass}`).removeClass(hiddenClass);
+  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
 };
diff --git a/src/scripts/no_recommended/hide_recommended_posts.js b/src/scripts/no_recommended/hide_recommended_posts.js
@@ -1,19 +1,19 @@
-import { buildStyle, filterPostElements, postSelector } from '../../util/interface.js';
+import { buildStyle, getTimelineItemWrapper, filterPostElements, postSelector } from '../../util/interface.js';
 import { onNewPosts } from '../../util/mutations.js';
 import { timelineObject } from '../../util/react_props.js';
 
 const excludeClass = 'xkit-no-recommended-posts-done';
-const hiddenClass = 'xkit-no-recommended-posts-hidden';
-const unHiddenClass = 'xkit-no-recommended-posts-many';
+const hiddenAttribute = 'data-no-recommended-posts-hidden';
+const unHiddenAttribute = 'data-no-recommended-posts-many';
 const timeline = /\/v2\/timeline\/dashboard/;
 const includeFiltered = true;
 
 const styleElement = buildStyle(`
-.${hiddenClass}:not(.${unHiddenClass}) article {
+[${hiddenAttribute}]:not([${unHiddenAttribute}]) article {
   display: none;
 }
 
-:not(.${unHiddenClass}) + .${unHiddenClass}::before {
+:not([${unHiddenAttribute}]) + [${unHiddenAttribute}]::before {
   content: 'Too many recommended posts to hide!';
 
   display: block;
@@ -34,9 +34,9 @@ const precedingHiddenPosts = ({ previousElementSibling: previousElement }, count
   // If there is no previous sibling, stop counting
   if (!previousElement) return count;
   // If the previous sibling is not a post, skip over it
-  if (!previousElement.matches(postSelector)) return precedingHiddenPosts(previousElement, count);
+  if (!previousElement.matches(postSelector) || !previousElement.querySelector(postSelector)) return precedingHiddenPosts(previousElement, count);
   // If the previous sibling is hidden, count it and continue
-  if (previousElement.classList.contains(hiddenClass)) return precedingHiddenPosts(previousElement, count + 1);
+  if (previousElement.matches(`[${hiddenAttribute}]`)) return precedingHiddenPosts(previousElement, count + 1);
   // Otherwise, we've hit a non-hidden post; stop counting
   return count;
 };
@@ -53,10 +53,12 @@ const processPosts = async function (postElements) {
     if (loggingReason.startsWith('search:')) return;
     if (loggingReason === 'orbitznews') return;
 
-    postElement.classList.add(hiddenClass);
+    const timelineItem = getTimelineItemWrapper(postElement);
 
-    if (precedingHiddenPosts(postElement) >= 10) {
-      postElement.classList.add(unHiddenClass);
+    timelineItem.setAttribute(hiddenAttribute, '');
+
+    if (precedingHiddenPosts(timelineItem) >= 10) {
+      timelineItem.setAttribute(hiddenAttribute, '');
     }
   });
 };
@@ -69,6 +71,7 @@ export const main = async function () {
 export const clean = async function () {
   onNewPosts.removeListener(processPosts);
   $(`.${excludeClass}`).removeClass(excludeClass);
-  $(`.${hiddenClass}`).removeClass(hiddenClass);
+  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
+  $(`[${unHiddenAttribute}]`).removeAttr(unHiddenAttribute);
   styleElement.remove();
 };
diff --git a/src/scripts/no_recommended/hide_tag_carousels.js b/src/scripts/no_recommended/hide_tag_carousels.js
@@ -1,13 +1,13 @@
 import { keyToCss } from '../../util/css_map.js';
-import { buildStyle } from '../../util/interface.js';
+import { buildStyle, getTimelineItemWrapper } from '../../util/interface.js';
 import { pageModifications } from '../../util/mutations.js';
 
-const hiddenClass = 'xkit-no-recommended-tag-carousels-hidden';
+const hiddenAttribute = 'data-no-recommended-tag-carousels-hidden';
 
 const styleElement = buildStyle(`
-  .${hiddenClass} { position: relative; }
-  .${hiddenClass} > div { visibility: hidden; position: absolute; max-width: 100%; }
-  .${hiddenClass} > div img, .${hiddenClass} > div canvas { visibility: hidden; }
+  [${hiddenAttribute}] { position: relative; }
+  [${hiddenAttribute}] > div { visibility: hidden; position: absolute; max-width: 100%; }
+  [${hiddenAttribute}] > div img, [${hiddenAttribute}] > div canvas { visibility: hidden; }
 `);
 
 const tagCardCarouselItemSelector = keyToCss('tagCardCarouselItem');
@@ -16,10 +16,10 @@ const carouselWrapperSelector = `${listTimelineObjectSelector} ${keyToCss('carou
 
 const hideTagCarousels = carouselWrappers => carouselWrappers
   .filter(carouselWrapper => carouselWrapper.querySelector(tagCardCarouselItemSelector) !== null)
-  .map(carouselWrapper => carouselWrapper.closest(listTimelineObjectSelector))
-  .forEach(listTimelineObject => {
-    listTimelineObject.classList.add(hiddenClass);
-    listTimelineObject.previousElementSibling.classList.add(hiddenClass);
+  .map(getTimelineItemWrapper)
+  .forEach(timelineItem => {
+    timelineItem.setAttribute(hiddenAttribute, '');
+    timelineItem.previousElementSibling.setAttribute(hiddenAttribute, '');
   });
 
 export const main = async function () {
@@ -30,5 +30,5 @@ export const main = async function () {
 export const clean = async function () {
   pageModifications.unregister(hideTagCarousels);
   styleElement.remove();
-  $(`.${hiddenClass}`).removeClass(hiddenClass);
+  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
 };
diff --git a/src/scripts/postblock.css b/src/scripts/postblock.css
@@ -1,3 +1,3 @@
-.xkit-postblock-hidden article {
+[data-postblock-hidden] article {
   display: none;
 }
diff --git a/src/scripts/postblock.js b/src/scripts/postblock.js
@@ -1,4 +1,4 @@
-import { filterPostElements } from '../util/interface.js';
+import { getTimelineItemWrapper, filterPostElements } from '../util/interface.js';
 import { registerMeatballItem, unregisterMeatballItem } from '../util/meatballs.js';
 import { showModal, hideModal, modalCancelButton } from '../util/modals.js';
 import { timelineObject } from '../util/react_props.js';
@@ -7,7 +7,7 @@ import { dom } from '../util/dom.js';
 
 const meatballButtonId = 'postblock';
 const meatballButtonLabel = 'Block this post';
-const hiddenClass = 'xkit-postblock-hidden';
+const hiddenAttribute = 'data-postblock-hidden';
 const storageKey = 'postblock.blockedPostRootIDs';
 
 const processPosts = async function (postElements) {
@@ -20,9 +20,9 @@ const processPosts = async function (postElements) {
     const rootID = rebloggedRootId || postID;
 
     if (blockedPostRootIDs.includes(rootID)) {
-      postElement.classList.add(hiddenClass);
+      getTimelineItemWrapper(postElement).setAttribute(hiddenAttribute, '');
     } else {
-      postElement.classList.remove(hiddenClass);
+      getTimelineItemWrapper(postElement).removeAttribute(hiddenAttribute);
     }
   });
 };
@@ -66,7 +66,7 @@ export const clean = async function () {
   unregisterMeatballItem(meatballButtonId);
   onNewPosts.removeListener(processPosts);
 
-  $(`.${hiddenClass}`).removeClass(hiddenClass);
+  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
 };
 
 export const stylesheet = true;
diff --git a/src/scripts/show_originals.css b/src/scripts/show_originals.css
@@ -1,4 +1,4 @@
-[data-show-originals="on"] ~ [data-timeline] .xkit-show-originals-hidden article {
+[data-show-originals="on"] ~ [data-timeline] [data-show-originals-hidden] article {
   display: none;
 }
 

diff --git a/src/scripts/show_originals.js b/src/scripts/show_originals.js
@@ -1,12 +1,12 @@
-import { filterPostElements, blogViewSelector } from '../util/interface.js';
+import { filterPostElements, blogViewSelector, getTimelineItemWrapper } from '../util/interface.js';
 import { isMyPost, timelineObject } from '../util/react_props.js';
 import { getPreferences } from '../util/preferences.js';
 import { onNewPosts } from '../util/mutations.js';
 import { keyToCss } from '../util/css_map.js';
 import { translate } from '../util/language_data.js';
 import { userBlogs } from '../util/user.js';
 
-const hiddenClass = 'xkit-show-originals-hidden';
+const hiddenAttribute = 'data-show-originals-hidden';
 const lengthenedClass = 'xkit-show-originals-lengthened';
 const controlsClass = 'xkit-show-originals-controls';
 
@@ -108,7 +108,7 @@ const processPosts = async function (postElements) {
       if (showReblogsWithContributedContent && content.length > 0) { return; }
       if (whitelist.includes(blogName)) { return; }
 
-      postElement.classList.add(hiddenClass);
+      getTimelineItemWrapper(postElement).setAttribute(hiddenAttribute, '');
     });
 };
 
@@ -132,8 +132,7 @@ export const main = async function () {
 export const clean = async function () {
   onNewPosts.removeListener(processPosts);
 
-  $(`.${hiddenClass}`).removeClass(hiddenClass);
-  $('[data-show-originals]').removeAttr('data-show-originals');
+  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
   $(`.${lengthenedClass}`).removeClass(lengthenedClass);
   $(`.${controlsClass}`).remove();
 };