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
diff --git a/src/contentScripts/communityConsole/avatars.js b/src/contentScripts/communityConsole/avatars.js
index 9c555b9..67c8b6d 100644
--- a/src/contentScripts/communityConsole/avatars.js
+++ b/src/contentScripts/communityConsole/avatars.js
@@ -323,15 +323,22 @@
// 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 @@
}
}
- header.appendChild(avatarsContainer);
+ header.insertBefore(avatarsContainer, expandBtn);
if (res.state == 'private') {
var label = chrome.i18n.getMessage(
diff --git a/src/contentScripts/communityConsole/extraInfo.js b/src/contentScripts/communityConsole/extraInfo.js
index a192878..2efe634 100644
--- a/src/contentScripts/communityConsole/extraInfo.js
+++ b/src/contentScripts/communityConsole/extraInfo.js
@@ -828,26 +828,24 @@
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 @@
}
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;
diff --git a/src/injections/batchLock.js b/src/injections/batchLock.js
index 6b45cdd..4fb3af8 100644
--- a/src/injections/batchLock.js
+++ b/src/injections/batchLock.js
@@ -109,17 +109,21 @@
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);
})
diff --git a/src/static/css/ccdarktheme.css b/src/static/css/ccdarktheme.css
index e912a8c..be6b4d9 100644
--- a/src/static/css/ccdarktheme.css
+++ b/src/static/css/ccdarktheme.css
@@ -55,6 +55,7 @@
.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 .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;
}
diff --git a/src/static/css/reposition_expand_thread.css b/src/static/css/reposition_expand_thread.css
index ea26942..0e35af3 100644
--- a/src/static/css/reposition_expand_thread.css
+++ b/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;
}
diff --git a/src/static/css/thread_list_avatars.css b/src/static/css/thread_list_avatars.css
index ff739d8..7427433 100644
--- a/src/static/css/thread_list_avatars.css
+++ b/src/static/css/thread_list_avatars.css
@@ -50,7 +50,10 @@
/*
* 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);
}
diff --git a/src/static/css/ui_spacing/console.css b/src/static/css/ui_spacing/console.css
index 33d0fec..686530a 100644
--- a/src/static/css/ui_spacing/console.css
+++ b/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) {