Fix features in thread lists

Due to an update in the HTML structure of thread lists, many features
stopped working properly. This CL fixes these issues.

In the case of the "reduce whitespace" option, the thread list styles
applied in small screens have been temporarily removed since they have
to be fixed still.

Bug: twpowertools:138
Change-Id: Icf6d74f8a579fedb6af65f44864bd6f744098f2a

src/contentScripts/communityConsole/avatars.js

@@ -323,15 +323,22 @@ export default class AvatarsHandler {
 
   // Inject avatars for thread summary (thread item) |node| in a thread list.
   inject(node) {
-    var header = node.querySelector(
-        'ec-thread-summary .main-header .panel-description a.header');
-    if (header === null) {
+    var header =
+        node.querySelector('ec-thread-summary .main-header .action .header');
+    var headerContent = header.querySelector(':scope > .header-content');
+    var expandBtn = header.querySelector(':scope > .expand-button');
+    if (headerContent === null) {
       console.error(
           '[threadListAvatars] Header is not present in the thread item\'s DOM.');
       return;
     }
+    if (expandBtn === null) {
+      console.error(
+          '[threadListAvatars] Expand button is not present in the thread item\'s DOM.');
+      return;
+    }
 
-    var thread = parseUrl(header.href);
+    var thread = parseUrl(headerContent.href);
     if (thread === false) {
       console.error('[threadListAvatars] Thread\'s link cannot be parsed.');
       return;
@@ -360,7 +367,7 @@ export default class AvatarsHandler {
             }
           }
 
-          header.appendChild(avatarsContainer);
+          header.insertBefore(avatarsContainer, expandBtn);
 
           if (res.state == 'private') {
             var label = chrome.i18n.getMessage(

src/contentScripts/communityConsole/extraInfo.js

@@ -828,26 +828,24 @@ export default class ExtraInfo {
   injectAtThreadList(li) {
     waitFor(
         () => {
-          const header = li.querySelector(
-              'ec-thread-summary .main-header .panel-description a.header');
-          if (header === null) {
-            console.error(
-                'extraInfo: Header is not present in the thread item\'s DOM.');
-            return;
+          const headerContent = li.querySelector(
+              'ec-thread-summary .main-header .header a.header-content');
+          if (headerContent === null) {
+            return Promise.reject(new Error(
+                'extraInfo: Header is not present in the thread item\'s DOM.'));
           }
 
-          const threadInfo = parseUrl(header.href);
+          const threadInfo = parseUrl(headerContent.href);
           if (threadInfo === false) {
-            console.error('extraInfo: Thread\'s link cannot be parsed.');
-            return;
+            return Promise.reject(
+                new Error('extraInfo: Thread\'s link cannot be parsed.'));
           }
 
           let authorLine = li.querySelector(
               'ec-thread-summary .header-content .top-row .author-line');
           if (!authorLine) {
-            console.error(
-                'extraInfo: Author line is not present in the thread item\'s DOM.');
-            return;
+            return Promise.reject(new Error(
+                'extraInfo: Author line is not present in the thread item\'s DOM.'));
           }
 
           let thread = this.lastThreadListThreads?.find?.(t => {
@@ -896,16 +894,16 @@ export default class ExtraInfo {
   }
 
   injectAtExpandedThreadList(toolbelt) {
-    const header =
+    const headerContent =
         toolbelt?.parentNode?.parentNode?.parentNode?.querySelector?.(
-            '.main-header .panel-description a.header');
-    if (header === null) {
+            '.main-header .header a.header-content');
+    if (headerContent === null) {
       console.error(
           'extraInfo: Header is not present in the thread item\'s DOM.');
       return;
     }
 
-    const threadInfo = parseUrl(header.href);
+    const threadInfo = parseUrl(headerContent.href);
     if (threadInfo === false) {
       console.error('extraInfo: Thread\'s link cannot be parsed.');
       return;

src/injections/batchLock.js

@@ -109,17 +109,21 @@ function lockThreads(action) {
   var authuser = getAuthUser();
 
   checkboxes.forEach(checkbox => {
-    var url = recursiveParentElement(checkbox, 'A').href;
+    var url = recursiveParentElement(checkbox, 'EC-THREAD-SUMMARY')
+                  .querySelector('a.header-content')
+                  .href;
     var thread = parseUrl(url);
     if (thread === false) {
       console.error('Fatal error: thread URL ' + url + ' could not be parsed.');
       return;
     }
-    CCApi('SetThreadAttribute', {
-      1: thread.forum,
-      2: thread.thread,
-      3: (action == 'lock' ? 1 : 2),
-    }, /* authenticated = */ true, authuser)
+    CCApi(
+        'SetThreadAttribute', {
+          1: thread.forum,
+          2: thread.thread,
+          3: (action == 'lock' ? 1 : 2),
+        },
+        /* authenticated = */ true, authuser)
         .then(() => {
           addLogEntry(true, action, url, thread.thread);
         })

src/static/css/ccdarktheme.css

@@ -55,6 +55,7 @@ body.ec a {
 .material-content > header :is(material-button,
     material-button material-icon,
     .mdc-button.mdc-icon-button,
+    .mdc-button.mdc-icon-button material-icon,
     notification-bell material-icon) {
   color: rgba(255, 255, 255, .87)!important;
 }
@@ -311,7 +312,8 @@ ec-thread-summary material-expansionpanel ec-safe-html.body,
  **/
 ec-thread-summary material-expansionpanel .action material-button,
     ec-thread-list material-checkbox material-icon,
-    ec-thread-summary material-expansionpanel .star-button:not(.starred) {
+    ec-thread-summary material-expansionpanel .star-button:not(.starred),
+    ec-thread-summary material-expansionpanel .mdc-button.mdc-icon-button material-icon {
   color: #696867!important; /* Custom value to match previous behavior */
   opacity: 1!important;
 }

src/static/css/reposition_expand_thread.css

@@ -1,23 +1,21 @@
-ec-thread-summary .panel > .main-header {
-  flex-direction: row-reverse;
+ec-thread-summary .panel > .main-header > .action > .header > .expand-button {
+  order: -99963; /* This will position the button in the beginning. */
 }
 
-ec-thread-summary .panel > .main-header .expand-container {
-  padding-inline: 8px 0;
-}
-
-ec-thread-summary .panel > .main-header > .header {
+ec-thread-summary .panel > .main-header > .action > .header {
   padding-inline: 0px 19px!important;
 }
 
+/* Adjusting padding for the bulk action checkbox */
 ec-thread-list ec-bulk-actions .selection {
-  padding-inline-start: 29px;
+  padding-inline-start: 41px;
 }
 
+/* Adjusting padding for the info in the expanded thread */
 ec-thread-summary .panel .main .content-wrapper > .content > .content {
-  padding-inline: 121px 8px;
+  padding-inline: 136px 8px;
 }
 
 ec-thread-summary .main .toolbelt .TWPT-extrainfo-container {
-  margin-inline-start: 145px!important;
+  margin-inline-start: 156px!important;
 }

src/static/css/thread_list_avatars.css

@@ -50,7 +50,10 @@ html[dir="rtl"] .TWPT-avatars .TWPT-avatar:not(:first-child) {
 
 /*
  * Changing styles of existing elements so the avatars fit.
+ *
+ * NOTE: The first px value is the pixels already removed by the default CSS
+ * styles. The second px value is the value substracted due to the avatars.
  */
-body.TWPT-threadlistavatars-enabled ec-thread-summary .main-header .panel-description a.header .header-content {
-  width: calc(100% - 194px);
+body.TWPT-threadlistavatars-enabled ec-thread-summary .main-header .action .header .header-content {
+  width: calc(100% - 160px - 98px);
 }

src/static/css/ui_spacing/console.css

@@ -19,7 +19,13 @@
     display: none!important;
   }
 
-  ec-thread-summary .title,
+  /*
+   * IMPORTANT: Disabled temporarily since this breaks the interface in mobile
+   * and the fix will take a lot of time.
+   *
+   * This was broken by the recent update to the thtead list HTML.
+   **/
+  /*ec-thread-summary .title,
       ec-thread-summary ec-second-summary-line .properties,
       ec-thread-summary ec-second-summary-line ec-relative-time {
     margin-inline-start: 0!important;
@@ -44,11 +50,11 @@
     padding-inline: 0!important;
   }
 
-  body:not(.TWPT-threadlistavatars-enabled) ec-thread-summary div.header div.header-content {
+  body:not(.TWPT-threadlistavatars-enabled) ec-thread-summary div.header a.header-content {
     width: calc(100% - 68px)!important;
   }
 
-  body.TWPT-threadlistavatars-enabled ec-thread-summary div.header div.header-content {
+  body.TWPT-threadlistavatars-enabled ec-thread-summary div.header a.header-content {
     width: calc(100% - 134px)!important;
   }
 
@@ -104,6 +110,7 @@
     padding-inline: 56px 30px!important;
     padding-block: 0!important;
   }
+  */
 }
 
 @media (min-width: 37.5rem) {