feat: proper link colours, new suspension page

dimdenGD · Jul 15, 2024 · 4ef99d3 · 4ef99d3
1 parent bade5e9
commit 4ef99d3
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 14 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -87,7 +87,6 @@
     "photos_and_videos2": { "message": "Photos & videos" },
     "tweets_and_replies": { "message": "Tweets & replies" },
     "you_may_also_like": { "message": "You may also like", "description": "Max 26 characters, you can use word 'People' if no space" },
-    "user_was_suspended": { "message": "User was suspended." },
     "user_was_not_found": { "message": "User was not found." },
     "timeline_not_authorized": { "message": "You are not authorized to view this user's timeline." },
     "create_btn": { "message": "[create]" },
@@ -185,6 +184,7 @@
     "timeline_type": { "message": "Timeline type" },
     "show_topic_tweets": { "message": "Show topic tweets (algo only)" },
     "show_colors_in_timeline": { "message": "Show custom link colors of users in home timeline" },
+    "always_show_link_color": { "message": "Always show custom link colors instead of on hover" },
     "enable_twemoji": { "message": "Enable Twemoji" },
     "hearts_instead_stars": { "message": "Show hearts (likes) instead of stars (favorites)" },
     "dark_mode": { "message": "Dark mode" },
@@ -406,6 +406,8 @@
     "why_you_cant_see_block_user": { "message": "You can't follow or see @$SCREEN_NAME$'s Tweets.", "placeholders": { "screen_name": { "content": "CoolPerson2000" } } },
     "nonexistent_user": { "message": "This account doesn't exist" },
     "nonexistent_user_desc": { "message": "Try searching for another." },
+    "suspended_user": { "message": "Account suspended" },
+    "suspended_user_desc": { "message": "The profile you are trying to view has been suspended. To return to your home timeline, <a href=\"/home\">click here</a>." },
     "you_blocked_user": { "message": "You blocked @$SCREEN_NAME$", "placeholders": { "screen_name": { "content": "CoolPerson2000" } } },
     "do_you_want_see_blocked_user": { "message": "Are you sure you want to view these Tweets? Viewing Tweets won't unblock @$SCREEN_NAME$.", "placeholders": { "screen_name": { "content": "CoolPerson2000" } } },
     "I_want_see_blocked_user": { "message": "Yes, view profile" },

diff --git a/layouts/home/style.css b/layouts/home/style.css
@@ -1,3 +1,7 @@
+:root {
+    --default-link-color: var(--link-color);
+}
+
 #loading-box {
     background-color: var(--background-color);
     height: 100%;
@@ -150,8 +154,19 @@ body {
     padding: 10px;
 }
 
-.tweet:not(.colour) .tweet-header *:not(.nice-button), .tweet:not(.colour) .tweet-time {
+.tweet:not(.colour) .tweet-header-name:not(:hover), .tweet:not(.colour) .tweet-header-handle, .tweet:not(.colour) .tweet-time:not(:hover)  {
     --link-color: var(--almost-black) !important;
+    color: var(--link-color) !important;
+}
+
+.tweet *::selection {
+    background-color: var(--link-color) !important;
+    color: var(--background-color) !important;
+}
+
+.tweet *::-moz-selection {
+    background-color: var(--link-color) !important;
+    color: var(--background-color) !important;
 }
 
 .tweet-header-name-quote, .tweet-header-info-quote *, .tweet-time-quote {
@@ -400,8 +415,8 @@ body {
     color: var(--light-gray)
 }
 
-a:hover,
-.tweet-header-info:hover,
+a:not(.tweet-header-info):not(.tweet-body-quote):hover,
+.tweet-header-info *:hover,
 .tweet-body-text a:hover,
 .center-text:hover,
 #wtf-refresh:hover,
@@ -411,6 +426,10 @@ a:hover,
     text-decoration: underline
 }
 
+.tweet-body-text-quote *:not(a) {
+    text-decoration: none;
+}
+
 .tweet-avatar,
 .tweet-avatar-quote {
     border-radius: 5px

diff --git a/layouts/profile/script.js b/layouts/profile/script.js
@@ -271,20 +271,42 @@ function updateUserData() {
                 document.getElementById('loading-box').hidden = true;
                 document.getElementById('profile-name').innerText = `@${user_handle}`;
                 document.getElementById('timeline').innerHTML = html`<div class="unable_load_timeline" dir="auto" style="padding: 50px;color: var(--darker-gray); font-size: 20px;"><h2>${LOC.nonexistent_user.message}</h2><p style="font-size: 15px;" href="/${pageUser.screen_name}">${LOC.nonexistent_user_desc.message.replaceAll("$SCREEN_NAME$",pageUser.screen_name)}</p></div>`;
-                document.getElementById('profile-avatar').src = 'moz-extension://9605be5b-b11d-4459-879e-2b65fd1d7bca/images/default_profile_images/default_profile_0_400x400.png';
+                document.getElementById('trends').hidden = true;
+                document.getElementById('profile-nav-center-cell').style.display = 'none'; // ???
+                document.getElementById('profile-banner-sticky').style.backgroundColor = 'var(--background-color)';
+                document.getElementById('wtf').hidden = true;
+                document.getElementById('profile-nav').style.boxShadow = 'none';
+                document.getElementById('profile-avatar').src = chrome.runtime.getURL(`images/default_profile_images/default_profile_0_normal.png`);
                 return;
             }
-            document.getElementById('loading-box').hidden = false;
             if(String(e).includes('User has been suspended.')) {
-                return document.getElementById('loading-box-error').innerHTML = html`${LOC.user_was_suspended.message}<br><a href="/home">${LOC.go_homepage.message}</a>`;
+                document.getElementById('loading-box').hidden = true;
+                document.getElementById('profile-name').innerText = `@${user_handle}`;
+                document.getElementById('timeline').innerHTML = html`<div class="unable_load_timeline" dir="auto" style="padding: 50px;color: var(--darker-gray); font-size: 20px;"><h2>${LOC.suspended_user.message}</h2><p style="font-size: 15px;" href="/${pageUser.screen_name}">${LOC.suspended_user_desc.message.replaceAll("$SCREEN_NAME$",pageUser.screen_name)}</p></div>`;
+                document.getElementById('trends').hidden = true;
+                document.getElementById('profile-nav-center-cell').style.display = 'none'; // ???
+                document.getElementById('profile-banner-sticky').style.backgroundColor = 'var(--background-color)';
+                document.getElementById('wtf').hidden = true;
+                document.getElementById('profile-nav').style.boxShadow = 'none';
+                document.getElementById('profile-avatar').src = chrome.runtime.getURL(`images/default_profile_images/default_profile_0_normal.png`);
+                return;
             }
+            document.getElementById('loading-box').hidden = false;
             return document.getElementById('loading-box-error').innerHTML = html`${String(e)}.<br><a href="/home">${LOC.go_homepage.message}</a>`;
         });
         if(oldUser.reason) {
             let e = oldUser.reason;
             if(String(e).includes('User has been suspended.')) {
-                document.getElementById('loading-box').hidden = false;
-                return document.getElementById('loading-box-error').innerHTML = html`${LOC.user_was_suspended.message}<br><a href="/home">${LOC.go_homepage.message}</a>`;
+                document.getElementById('loading-box').hidden = true;
+                document.getElementById('profile-name').innerText = `@${user_handle}`;
+                document.getElementById('timeline').innerHTML = html`<div class="unable_load_timeline" dir="auto" style="padding: 50px;color: var(--darker-gray); font-size: 20px;"><h2>${LOC.suspended_user.message}</h2><p style="font-size: 15px;" href="/${pageUser.screen_name}">${LOC.suspended_user_desc.message.replaceAll("$SCREEN_NAME$",pageUser.screen_name)}</p></div>`;
+                document.getElementById('trends').hidden = true;
+                document.getElementById('profile-nav-center-cell').style.display = 'none'; // ???
+                document.getElementById('profile-banner-sticky').style.backgroundColor = 'var(--background-color)';
+                document.getElementById('wtf').hidden = true;
+                document.getElementById('profile-nav').style.boxShadow = 'none';
+                document.getElementById('profile-avatar').src = chrome.runtime.getURL(`images/default_profile_images/default_profile_0_normal.png`);
+                return;
             }
         }
         if(pageUserData.reason) {

diff --git a/layouts/settings/index.html b/layouts/settings/index.html
@@ -255,9 +255,15 @@ <h2>__MSG_old_twitter_look__</h2><br>
                     <div class="setting">
                         <input type="checkbox" id="modern-ui-switch"> <label for="modern-ui-switch">__MSG_modern_ui__</label>
                     </div>
+                    <div class="setting">
+                        <input type="checkbox" id="old-style-suspensions"> <label for="old-style-suspensions">__MSG_old_style_suspensions__</label>
+                    </div>
                     <div class="setting">
                         <input type="checkbox" id="link-colors-in-tl"> <label for="link-colors-in-tl">__MSG_show_colors_in_timeline__</label>
                     </div>
+                    <div class="setting">
+                        <input type="checkbox" id="always-show-link-color"> <label for="always-show-link-color">__MSG_always_show_link_color__</label>
+                    </div>
                     <div class="setting">
                         <input type="checkbox" id="no-big-font"> <label for="no-big-font">__MSG_no_big_font__</label>
                     </div>

diff --git a/layouts/settings/script.js b/layouts/settings/script.js
@@ -262,6 +262,7 @@ setTimeout(async () => {
     let linkColor = document.getElementById('link-color');
     let heartsNotStars = document.getElementById('hearts-instead-stars');
     let linkColorsInTL = document.getElementById('link-colors-in-tl');
+    let alwaysShowLinkColor = document.getElementById('always-show-link-color');
     let enableTwemoji = document.getElementById('enable-twemoji');
     let enableHashflags = document.getElementById('enable-hashflags');
     let timelineType = document.getElementById('tl-type');
@@ -522,6 +523,11 @@ setTimeout(async () => {
             linkColorsInTL: linkColorsInTL.checked
         }, () => { });
     });
+    alwaysShowLinkColor.addEventListener('change', () => {
+        chrome.storage.sync.set({
+            alwaysShowLinkColor: alwaysShowLinkColor.checked
+        }, () => { });
+    });
     enableTwemoji.addEventListener('change', () => {
         chrome.storage.sync.set({
             enableTwemoji: enableTwemoji.checked
@@ -989,6 +995,7 @@ setTimeout(async () => {
     }
     heartsNotStars.checked = !!vars.heartsNotStars;
     linkColorsInTL.checked = !!vars.linkColorsInTL;
+    alwaysShowLinkColor.checked = !!vars.alwaysShowLinkColor;
     enableTwemoji.checked = !!vars.enableTwemoji;
     enableHashflags.checked = !!vars.enableHashflags;
     showExactValues.checked = !!vars.showExactValues;

diff --git a/scripts/config.js b/scripts/config.js
@@ -20,7 +20,7 @@ let vars;
 let varsResolve, varsPromise = new Promise(resolve => varsResolve = resolve);
 async function loadVars() { 
     vars = await new Promise(resolve => {
-        chrome.storage.sync.get(['linkColor', 'font', 'heartsNotStars', 'linkColorsInTL', 'enableTwemoji', 'chronologicalTL', 
+        chrome.storage.sync.get(['linkColor', 'font', 'heartsNotStars', 'linkColorsInTL', 'alwaysShowLinkColor', 'enableTwemoji', 'chronologicalTL', 
             'timelineType', 'showTopicTweets', 'darkMode', 'disableHotkeys', 'customCSS', 'customCSSVariables', 'savePreferredQuality',
             'noBigFont', 'language', 'autoplayVideos', 'displaySensitiveContent', 'displaySensitiveContentMoved', 'volume', 'timeMode',
             'showOriginalImages', 'pitchBlack', 'seeTweetViews', 'autotranslateProfiles', 'roundAvatars', 'twitterBlueCheckmarks',
@@ -41,6 +41,12 @@ async function loadVars() {
                     linkColorsInTL: true
                 }, () => {});
             }
+            if (typeof(data.alwaysShowLinkColor) !== 'boolean') {
+                data.alwaysShowLinkColor = false;
+                chrome.storage.sync.set({
+                    alwaysShowLinkColor: false
+                }, () => {});
+            }
             if(typeof(data.enableTwemoji) !== 'boolean') {
                 data.enableTwemoji = true;
                 chrome.storage.sync.set({

diff --git a/scripts/helpers.js b/scripts/helpers.js
@@ -1778,12 +1778,12 @@ async function appendTweet(t, timelineContainer, options = {}) {
             if(linkColors[t.user.id_str]) {
                 let sc = makeSeeableColor(linkColors[t.user.id_str]);
                 tweet.style.setProperty('--link-color', sc);
-                tweet.classList.add('colour');
+                if (vars.alwaysShowLinkColor) tweet.classList.add('colour');
             } else {
                 if(t.user.profile_link_color && t.user.profile_link_color !== '1DA1F2') {
                     let sc = makeSeeableColor(t.user.profile_link_color);
                     tweet.style.setProperty('--link-color', sc);
-                    tweet.classList.add('colour');
+                    if (vars.alwaysShowLinkColor) tweet.classList.add('colour');
                 }
             }
         }

diff --git a/scripts/tweetviewer.js b/scripts/tweetviewer.js
@@ -866,12 +866,12 @@ class TweetViewer {
             if(this.linkColors[t.user.id_str]) {
                 let sc = makeSeeableColor(this.linkColors[t.user.id_str]);
                 tweet.style.setProperty('--link-color', sc);
-                tweet.classList.add('colour');
+                if (vars.alwaysShowLinkColor) tweet.classList.add('colour');
             } else {
                 if(t.user.profile_link_color && t.user.profile_link_color !== '1DA1F2') {
                     let sc = makeSeeableColor(t.user.profile_link_color);
                     tweet.style.setProperty('--link-color', sc);
-                    tweet.classList.add('colour');
+                    if (vars.alwaysShowLinkColor) tweet.classList.add('colour');
                 }
             }
         }