From af2ab3e70fe6a9f7a87670df005da5323ab57302 Mon Sep 17 00:00:00 2001
From: marcustyphoon <marcustyphoon@gmail.com>
Date: Thu, 17 Aug 2023 15:15:25 -0700
Subject: [PATCH] Fix/improve content hiding with "virtual scroller" experiment
 (#1213)

Co-authored-by: April Sylph <28949509+AprilSylph@users.noreply.github.com>
---
 src/scripts/anti_capitalism.js                | 20 +++++++++------
 src/scripts/mutual_checker.css                |  2 +-
 src/scripts/mutual_checker.js                 |  8 +++---
 .../no_recommended/hide_blog_carousels.js     | 24 +++++++++---------
 src/scripts/no_recommended/hide_radar.js      |  8 +++---
 .../no_recommended/hide_recommended_blogs.js  | 10 ++++----
 .../no_recommended/hide_recommended_posts.js  | 25 +++++++++++--------
 .../no_recommended/hide_tag_carousels.js      | 20 +++++++--------
 src/scripts/postblock.css                     |  2 +-
 src/scripts/postblock.js                      | 10 ++++----
 src/scripts/show_originals.css                |  2 +-
 src/scripts/show_originals.js                 |  9 +++----
 src/scripts/tweaks/caught_up_line.js          | 22 ++++++++--------
 src/scripts/tweaks/hide_filtered_posts.js     | 12 ++++-----
 src/scripts/tweaks/hide_liked_posts.js        | 10 ++++----
 src/scripts/tweaks/hide_my_posts.js           | 10 ++++----
 src/scripts/tweaks/no_live.js                 | 10 ++++----
 src/util/interface.js                         |  6 +++++
 18 files changed, 112 insertions(+), 98 deletions(-)

diff --git a/src/scripts/anti_capitalism.js b/src/scripts/anti_capitalism.js
index 8a307e185..1f239f366 100644
--- 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
index e6db690b6..6e289b488 100644
--- 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
index 003bb6e8a..beb3fb9c6 100644
--- 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
index 1c9e7885f..9c8829ece 100644
--- 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
index a9242f613..2b5b4c507 100644
--- 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
index af10a2a56..8fbe8e2d2 100644
--- 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
index 3f600aff9..70e128464 100644
--- 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
index 33ec1a706..c4df1a969 100644
--- 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
index 616832e9b..4a878a331 100644
--- 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
index 0ef1d762b..bc8d445c3 100644
--- 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
index 33623ac0f..3f68a2d57 100644
--- 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
index 9bb507637..3d98b7e38 100644
--- a/src/scripts/show_originals.js
+++ b/src/scripts/show_originals.js
@@ -1,4 +1,4 @@
-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';
@@ -6,7 +6,7 @@ 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();
 };
diff --git a/src/scripts/tweaks/caught_up_line.js b/src/scripts/tweaks/caught_up_line.js
index b6ca0c146..61e944ddf 100644
--- a/src/scripts/tweaks/caught_up_line.js
+++ b/src/scripts/tweaks/caught_up_line.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-tweaks-caught-up-line-title';
-const borderClass = 'xkit-tweaks-caught-up-line-border';
+const hiddenAttribute = 'data-tweaks-caught-up-line-title';
+const borderAttribute = 'data-tweaks-caught-up-line-border';
 
 const styleElement = buildStyle(`
-  .${hiddenClass} > div { display: none; }
-  .${borderClass} > div {
+  [${hiddenAttribute}] > div { display: none; }
+  [${borderAttribute}] > div {
     box-sizing: content-box;
     height: 0px;
     overflow-y: hidden;
@@ -19,11 +19,11 @@ const listTimelineObjectSelector = keyToCss('listTimelineObject');
 const tagChicletCarouselItemSelector = `${listTimelineObjectSelector} ${keyToCss('tagChicletCarouselItem')}`;
 
 const createCaughtUpLine = tagChicletCarouselItems => tagChicletCarouselItems
-  .map(tagChicletCarouselItem => tagChicletCarouselItem.closest(listTimelineObjectSelector))
+  .map(getTimelineItemWrapper)
   .filter((element, index, array) => array.indexOf(element) === index)
-  .forEach(listTimelineObject => {
-    listTimelineObject.classList.add(borderClass);
-    listTimelineObject.previousElementSibling.classList.add(hiddenClass);
+  .forEach(timelineItem => {
+    timelineItem.setAttribute(borderAttribute, '');
+    timelineItem.previousElementSibling.setAttribute(hiddenAttribute, '');
   });
 
 export const main = async function () {
@@ -34,6 +34,6 @@ export const main = async function () {
 export const clean = async function () {
   pageModifications.unregister(createCaughtUpLine);
   styleElement.remove();
-  $(`.${hiddenClass}`).removeClass(hiddenClass);
-  $(`.${borderClass}`).removeClass(borderClass);
+  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
+  $(`[${borderAttribute}]`).removeAttr(borderAttribute);
 };
diff --git a/src/scripts/tweaks/hide_filtered_posts.js b/src/scripts/tweaks/hide_filtered_posts.js
index 56ff7d506..8619dd92c 100644
--- a/src/scripts/tweaks/hide_filtered_posts.js
+++ b/src/scripts/tweaks/hide_filtered_posts.js
@@ -1,13 +1,13 @@
 import { pageModifications } from '../../util/mutations.js';
 import { keyToCss } from '../../util/css_map.js';
-import { buildStyle } from '../../util/interface.js';
+import { buildStyle, getTimelineItemWrapper } from '../../util/interface.js';
 
-const hiddenClass = 'xkit-tweaks-hide-filtered-posts-hidden';
-const styleElement = buildStyle(`.${hiddenClass} { display: none; }`);
+const hiddenAttribute = 'data-tweaks-hide-filtered-posts-hidden';
+const styleElement = buildStyle(`[${hiddenAttribute}] article { display: none; }`);
 
 const hideFilteredPosts = filteredScreens => filteredScreens
-  .map(filteredScreen => filteredScreen.closest('article'))
-  .forEach(article => article.classList.add(hiddenClass));
+  .map(getTimelineItemWrapper)
+  .forEach(timelineItem => timelineItem.setAttribute(hiddenAttribute, ''));
 
 export const main = async function () {
   const filteredScreenSelector = `article ${keyToCss('filteredScreen')}`;
@@ -19,5 +19,5 @@ export const clean = async function () {
   pageModifications.unregister(hideFilteredPosts);
   styleElement.remove();
 
-  $(`.${hiddenClass}`).removeClass(hiddenClass);
+  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
 };
diff --git a/src/scripts/tweaks/hide_liked_posts.js b/src/scripts/tweaks/hide_liked_posts.js
index a3c007e9e..5ad301cd2 100644
--- a/src/scripts/tweaks/hide_liked_posts.js
+++ b/src/scripts/tweaks/hide_liked_posts.js
@@ -1,18 +1,18 @@
 import { onNewPosts } from '../../util/mutations.js';
-import { buildStyle, filterPostElements } from '../../util/interface.js';
+import { buildStyle, getTimelineItemWrapper, filterPostElements } from '../../util/interface.js';
 import { isMyPost, timelineObject } from '../../util/react_props.js';
 
 const timeline = /\/v2\/timeline\/dashboard/;
 
-const hiddenClass = 'xkit-tweaks-hide-liked-posts-hidden';
-const styleElement = buildStyle(`.${hiddenClass} article { display: none; }`);
+const hiddenAttribute = 'data-tweaks-hide-liked-posts-hidden';
+const styleElement = buildStyle(`[${hiddenAttribute}] article { display: none; }`);
 
 const processPosts = async function (postElements) {
   filterPostElements(postElements, { timeline }).forEach(async postElement => {
     const { liked } = await timelineObject(postElement);
     const myPost = await isMyPost(postElement);
 
-    if (liked && !myPost) postElement.classList.add(hiddenClass);
+    if (liked && !myPost) getTimelineItemWrapper(postElement).setAttribute(hiddenAttribute, '');
   });
 };
 
@@ -25,5 +25,5 @@ export const clean = async function () {
   onNewPosts.removeListener(processPosts);
   styleElement.remove();
 
-  $(`.${hiddenClass}`).removeClass(hiddenClass);
+  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
 };
diff --git a/src/scripts/tweaks/hide_my_posts.js b/src/scripts/tweaks/hide_my_posts.js
index 64ec693f3..34fe0306b 100644
--- a/src/scripts/tweaks/hide_my_posts.js
+++ b/src/scripts/tweaks/hide_my_posts.js
@@ -1,19 +1,19 @@
 import { onNewPosts } from '../../util/mutations.js';
-import { buildStyle, filterPostElements } from '../../util/interface.js';
+import { buildStyle, getTimelineItemWrapper, filterPostElements } from '../../util/interface.js';
 import { isMyPost } from '../../util/react_props.js';
 
 const excludeClass = 'xkit-tweaks-hide-my-posts-done';
 const timeline = /\/v2\/timeline\/dashboard/;
 
-const hiddenClass = 'xkit-tweaks-hide-my-posts-hidden';
-const styleElement = buildStyle(`.${hiddenClass} article { display: none; }`);
+const hiddenAttribute = 'data-tweaks-hide-my-posts-hidden';
+const styleElement = buildStyle(`[${hiddenAttribute}] article { display: none; }`);
 
 const processPosts = async function (postElements) {
   filterPostElements(postElements, { excludeClass, timeline }).forEach(async postElement => {
     const myPost = await isMyPost(postElement);
 
     if (myPost) {
-      postElement.classList.add(hiddenClass);
+      getTimelineItemWrapper(postElement).setAttribute(hiddenAttribute, '');
     }
   });
 };
@@ -28,5 +28,5 @@ export const clean = async function () {
   styleElement.remove();
 
   $(`.${excludeClass}`).removeClass(excludeClass);
-  $(`.${hiddenClass}`).removeClass(hiddenClass);
+  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
 };
diff --git a/src/scripts/tweaks/no_live.js b/src/scripts/tweaks/no_live.js
index 14de3d48a..c3311fa6b 100644
--- a/src/scripts/tweaks/no_live.js
+++ b/src/scripts/tweaks/no_live.js
@@ -1,13 +1,13 @@
 import { pageModifications } from '../../util/mutations.js';
-import { buildStyle } from '../../util/interface.js';
+import { buildStyle, getTimelineItemWrapper } from '../../util/interface.js';
 import { keyToCss } from '../../util/css_map.js';
 
-const hiddenClass = 'xkit-tweaks-no-live-hidden';
-const styleElement = buildStyle(`.${hiddenClass} { display: none; }`);
+const hiddenAttribute = 'data-tweaks-no-live-hidden';
+const styleElement = buildStyle(`[${hiddenAttribute}] > * { display: none; }`);
 
 const processFrames = frames =>
   frames.forEach(frame =>
-    frame.closest(keyToCss('listTimelineObjectInner'))?.classList?.add(hiddenClass)
+    getTimelineItemWrapper(frame).setAttribute(hiddenAttribute, '')
   );
 
 export const main = async function () {
@@ -22,5 +22,5 @@ export const clean = async function () {
   pageModifications.unregister(processFrames);
   styleElement.remove();
 
-  $(`.${hiddenClass}`).removeClass(hiddenClass);
+  $(`[${hiddenAttribute}]`).removeAttr(hiddenAttribute);
 };
diff --git a/src/util/interface.js b/src/util/interface.js
index f30f8b0cf..c0a54f0b3 100644
--- a/src/util/interface.js
+++ b/src/util/interface.js
@@ -1,8 +1,14 @@
+import { keyToCss } from './css_map.js';
 import { dom } from './dom.js';
 
 export const postSelector = '[tabindex="-1"][data-id]';
 export const blogViewSelector = '[style*="--blog-title-color"] *';
 
+const listTimelineObjectSelector = keyToCss('listTimelineObject');
+const cellSelector = keyToCss('cell');
+
+export const getTimelineItemWrapper = element => element.closest(cellSelector) || element.closest(listTimelineObjectSelector);
+
 /**
  * @typedef {object} PostFilterOptions
  * @property {string} [excludeClass] - Classname to exclude and add