From 4ef99d327e76415a10518f6e05f152742f1f4bec Mon Sep 17 00:00:00 2001 From: not-nullptr Date: Mon, 15 Jul 2024 16:58:37 +0100 Subject: [PATCH] feat: proper link colours, new suspension page --- _locales/en/messages.json | 4 +++- layouts/home/style.css | 25 ++++++++++++++++++++++--- layouts/profile/script.js | 32 +++++++++++++++++++++++++++----- layouts/settings/index.html | 6 ++++++ layouts/settings/script.js | 7 +++++++ scripts/config.js | 8 +++++++- scripts/helpers.js | 4 ++-- scripts/tweetviewer.js | 4 ++-- 8 files changed, 76 insertions(+), 14 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index e6a34579..3251d3bf 100644 --- 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, click here." }, "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 index 2689d150..1059aa67 100644 --- 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 index 86808eb5..c6cf5d9b 100644 --- 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`

${LOC.nonexistent_user.message}

${LOC.nonexistent_user_desc.message.replaceAll("$SCREEN_NAME$",pageUser.screen_name)}

`; - 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}
${LOC.go_homepage.message}`; + document.getElementById('loading-box').hidden = true; + document.getElementById('profile-name').innerText = `@${user_handle}`; + document.getElementById('timeline').innerHTML = html`

${LOC.suspended_user.message}

${LOC.suspended_user_desc.message.replaceAll("$SCREEN_NAME$",pageUser.screen_name)}

`; + 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)}.
${LOC.go_homepage.message}`; }); 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}
${LOC.go_homepage.message}`; + document.getElementById('loading-box').hidden = true; + document.getElementById('profile-name').innerText = `@${user_handle}`; + document.getElementById('timeline').innerHTML = html`

${LOC.suspended_user.message}

${LOC.suspended_user_desc.message.replaceAll("$SCREEN_NAME$",pageUser.screen_name)}

`; + 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 index 938da9c7..44d6adeb 100644 --- a/layouts/settings/index.html +++ b/layouts/settings/index.html @@ -255,9 +255,15 @@

__MSG_old_twitter_look__


+
+ +
+
+ +
diff --git a/layouts/settings/script.js b/layouts/settings/script.js index f86a988e..29f61af5 100644 --- 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 index 2a952629..c953f2a2 100644 --- 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 index c8959664..8a8364d0 100644 --- 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 index 26dadf2b..61629644 100644 --- 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'); } } }