Adapt extension to the nested replies feature

Some features didn't work correctly with threads which included nested
replies, so this CL addresses those issues.

Fixed: twpowertools:128, twpowertools:133, twpowertools:134
Change-Id: Id1edaa501cdf904326749bf558837938f45f2500
diff --git a/src/contentScripts/communityConsole/infiniteScroll.js b/src/contentScripts/communityConsole/infiniteScroll.js
index 55dc0ae..0d2f3c1 100644
--- a/src/contentScripts/communityConsole/infiniteScroll.js
+++ b/src/contentScripts/communityConsole/infiniteScroll.js
@@ -1,8 +1,13 @@
 import {getOptions, isOptionEnabled} from '../../common/optionsUtils.js';
 
 const kInteropLoadMoreClasses = {
+  // New (interop) UI without nested replies
   'scTailwindThreadMorebuttonload-all': 'threadall',
   'scTailwindThreadMorebuttonload-more': 'thread',
+
+  // New (interop) UI with nested replies
+  'scTailwindThreadMessagegapload-all': 'threadall',
+  'scTailwindThreadMessagegapload-more': 'thread',
 };
 
 export default class InfiniteScroll {
diff --git a/src/contentScripts/communityConsole/main.js b/src/contentScripts/communityConsole/main.js
index 5053c38..3f2402d 100644
--- a/src/contentScripts/communityConsole/main.js
+++ b/src/contentScripts/communityConsole/main.js
@@ -24,6 +24,7 @@
   // Load more bar and buttons
   '.load-more-bar',
   '.scTailwindThreadMorebuttonbutton',
+  '.scTailwindThreadMessagegapbutton',
 
   // User profile card inside ec-unified-user
   'ec-unified-user .scTailwindUser_profileUsercardmain',
@@ -90,7 +91,8 @@
     if (node.classList.contains('load-more-bar')) {
       infiniteScroll.observeLoadMoreBar(node);
     }
-    if (node.classList.contains('scTailwindThreadMorebuttonbutton')) {
+    if (node.classList.contains('scTailwindThreadMorebuttonbutton') ||
+        node.classList.contains('scTailwindThreadMessagegapbutton')) {
       infiniteScroll.observeLoadMoreInteropBtn(node);
     }
 
diff --git a/src/contentScripts/publicThread.js b/src/contentScripts/publicThread.js
index fb251b9..5ad2a81 100644
--- a/src/contentScripts/publicThread.js
+++ b/src/contentScripts/publicThread.js
@@ -9,6 +9,7 @@
     buttonSelectors: [
       '.thread-all-replies__load-more-button',
       '.scTailwindThreadMorebuttonload-more .scTailwindThreadMorebuttonbutton',
+      '.scTailwindThreadMessagegapload-more .scTailwindThreadMessagegapbutton',
     ],
   },
   {
@@ -16,6 +17,7 @@
     buttonSelectors: [
       '.thread-all-replies__load-all-button',
       '.scTailwindThreadMorebuttonload-all .scTailwindThreadMorebuttonbutton',
+      '.scTailwindThreadMessagegapload-all .scTailwindThreadMessagegapbutton',
     ],
   }
 ];
diff --git a/src/static/css/ccdarktheme.css b/src/static/css/ccdarktheme.css
index 9bf1351..e912a8c 100644
--- a/src/static/css/ccdarktheme.css
+++ b/src/static/css/ccdarktheme.css
@@ -1751,6 +1751,16 @@
   color: var(--TWPT-interop-secondary-text);
 }
 
+.scTailwindThreadMessagegapdivider {
+  background: var(--TWPT-interop-subtle-border);
+}
+
+.scTailwindThreadMessagegapbutton {
+  background: #1f1f1f;
+  border: 1px solid var(--TWPT-interop-subtle-border);
+  color: var(--TWPT-interop-secondary-text);
+}
+
 .scTailwindThreadPesignupdialogclose-button-row button {
   color: #fff;
 }
diff --git a/src/static/css/ui_spacing/shared.css b/src/static/css/ui_spacing/shared.css
index 19be735..c3f87d3 100644
--- a/src/static/css/ui_spacing/shared.css
+++ b/src/static/css/ui_spacing/shared.css
@@ -32,7 +32,8 @@
   margin: 1rem 0!important;
 }
 
-.scTailwindThreadMorebuttonroot {
+.scTailwindThreadMorebuttonroot,
+    .scTailwindThreadMessagegaproot {
   margin: 0 0 0.75rem 0!important;
 }