nested comments, check that only comments content is in viewport

docs/work-notes/test-code2.ts

@@ -60,3 +60,12 @@ document.querySelector('button[id="comment-sort-button"]');
 document.querySelector('data[value="NEW"]').click()
 
 document.querySelector('#main-content').click()
+
+-------------
+
+var currentElement = document.querySelector('shreddit-comment[thingid^="t1_kz4bckd"]')
+var contentElement = currentElement.querySelector('shreddit-comment[thingid^="t1_kz4bckd"] > div[slot="comment"]')
+contentElement;
+
+
+

docs/work-notes/todo2.md

@@ -13,6 +13,7 @@ everything should throw custom exception classes and log
 db wrapper
   mark thread as read button, immediately radio
   add version label
+  nested comments, check that only comments content is in viewport
 
 // ovde na pocetku nove sesije oznacava prethodnu kao procitanu
 const { threadId, updatedAt } = existingThread;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reddit-unread-comments",
-  "version": "0.0.4",
+  "version": "1.0.0",
   "description": "Web extension for easier tracking of new comments on Reddit.",
   "private": false,
   "repository": "https://github.com/nemanjam/reddit-unread-comments",

source/manifest-v2-firefox.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Reddit Unread Comments",
-  "version": "0.0.4",
+  "version": "1.0.0",
 
   "icons": {
     "16": "assets/icons/favicon-16.png",

source/manifest-v3-chrome.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Reddit Unread Comments",
-  "version": "0.0.4",
+  "version": "1.0.0",
 
   "icons": {
     "16": "assets/icons/favicon-16.png",

source/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Reddit Unread Comments",
-  "version": "0.0.4",
+  "version": "1.0.0",
 
   "icons": {
     "16": "assets/icons/favicon-16.png",

source/reddit-comments/constants/selectors.ts

@@ -9,20 +9,29 @@ export const redditUrlRegex = /https?:\/\/www\.?reddit\.com.*/;
 
 export const commentIdAttribute = 'thingid';
 export const commentSelector = 'shreddit-comment[thingid^="t1_"]';
-export const getCommentSelectorById = (commentId: string) =>
-  `shreddit-comment[thingid^="${commentId}"]`;
 export const commentIdRegexValidate = /^t1_[a-z0-9]+$/;
 
-/*----------------- timestamp ----------------*/
+// comment
+export const getCommentSelectorFromId = (commentId: string) =>
+  `shreddit-comment[thingid^="${commentId}"]`;
 
-export const getTimestampSelectorById = (commentId: string) => {
-  const targetCommentSelector = getCommentSelectorById(commentId);
+// timestamp
+export const getTimestampSelectorFromId = (commentId: string) => {
+  const targetCommentSelector = getCommentSelectorFromId(commentId);
 
   // select direct child element first to exclude nested comments
   const timestampSelector = `${targetCommentSelector} > div[slot="commentMeta"] time[datetime]`;
   return timestampSelector;
 };
 
+// content
+export const getContentSelectorFromId = (commentId: string) => {
+  const targetCommentSelector = getCommentSelectorFromId(commentId);
+
+  const contentSelector = `${targetCommentSelector} > div[slot="comment"]`; // used in styles.scss too
+  return contentSelector;
+};
+
 /*----------------- thread ----------------*/
 
 export const threadPostSelector = 'shreddit-post[id^="t3_"]';

source/reddit-comments/dom/highlight-by-read.ts

@@ -20,7 +20,12 @@ import { MyCreateModelFailedDBException } from '../exceptions';
 import logger from '../logger';
 import { isActiveTabAndRedditThread } from '../utils';
 import { validateCommentElementIdOrThrow } from '../validation';
-import { addClass, isElementInViewport, removeClass } from './highlight-common';
+import {
+  addClass,
+  getCommentContentElement,
+  isElementInViewport,
+  removeClass,
+} from './highlight-common';
 import { getThreadIdFromDom } from './thread';
 import { getDateFromCommentId } from './timestamp';
 
@@ -154,7 +159,11 @@ export const markAsRead = async (
     const commentId = validateCommentElementIdOrThrow(commentElement);
     const isAlreadyMarkedComment = allSessionsCommentsIds.includes(commentId); // all checks in one loop
 
-    if (!isElementInViewport(commentElement) || isAlreadyMarkedComment) return;
+    // since comments are now nested, select only content of the comment
+    const commentContentElement = getCommentContentElement(commentElement);
+    if (!commentContentElement) return;
+
+    if (!isElementInViewport(commentContentElement) || isAlreadyMarkedComment) return;
 
     const sessionCreatedAt = currentSessionCreatedAt;
     await addComment(db, { threadId, commentId, sessionCreatedAt });

source/reddit-comments/dom/highlight-common.ts

@@ -4,11 +4,11 @@ import {
   highlightedCommentClass,
   highlightedCommentReadClass,
 } from '../constants/config';
-import { commentSelector } from '../constants/selectors';
+import { commentSelector, getContentSelectorFromId } from '../constants/selectors';
 import { validateCommentElementIdOrThrow } from '../validation';
 
 // sync, fix for big comments
-export const isElementInViewport = (element: HTMLElement) => {
+export const isElementInViewport = (element: HTMLElement): boolean => {
   const rect = element.getBoundingClientRect();
   const elementHeight = commentHeightHeadroom + (rect.bottom - rect.top);
 
@@ -27,6 +27,16 @@ export const isElementInViewport = (element: HTMLElement) => {
   return result;
 };
 
+export const getCommentContentElement = (commentElement: HTMLElement) => {
+  const commentId = validateCommentElementIdOrThrow(commentElement);
+  const contentSelector = getContentSelectorFromId(commentId);
+
+  // query from commentElement to save performance
+  // selector for current element can match element itself
+  const contentElement = commentElement.querySelector<HTMLElement>(contentSelector);
+  return contentElement;
+};
+
 export const addClass = (element: HTMLElement, className: string): void => {
   if (!element.classList.contains(className)) element.classList.add(className);
 };

source/reddit-comments/dom/timestamp.ts

@@ -1,11 +1,11 @@
-import { getTimestampSelectorById } from '../constants/selectors';
+import { getTimestampSelectorFromId } from '../constants/selectors';
 import {
   MyElementAttributeNotValidDOMException,
   MyElementNotFoundDOMException,
 } from '../exceptions';
 
 export const getTimestampElementFromCommentId = (commentId: string) => {
-  const timestampSelector = getTimestampSelectorById(commentId);
+  const timestampSelector = getTimestampSelectorFromId(commentId);
   const timestampElement = document.querySelector<HTMLElement>(timestampSelector);
 
   return timestampElement;