paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-18 04:43:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

avatar: Stop adding &s=50 to Gravatar and Zulip avatar requests.

Browse Source 
This parameter is unused for Zulip avatars, and results in a smaller
(pixel-wise) Gravatar than we use for Zulip "small" avatars.  Omitting
the `s=50` parameter results in a 80x80 image, which is closer to the
100x100 image that Zulip thumbnails avatars to.  Ironically, using the
default (larger) Gravatar dimensions also results in _smaller_
responses (in bytes) from Gravatar.
This commit is contained in:
Alex Vandiver
2024-08-02 18:00:55 +00:00
committed by Tim Abbott
parent 87a0fa0c8c
commit b89d47a147
7 changed files with 23 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/message_live_update.ts
View File

@@ -1,6 +1,5 @@
import * as message_lists from "./message_lists"; import * as message_lists from "./message_lists";
import * as message_store from "./message_store"; import * as message_store from "./message_store";
import * as people from "./people";
import type {UserStatusEmojiInfo} from "./user_status"; import type {UserStatusEmojiInfo} from "./user_status";
export function rerender_messages_view(): void { export function rerender_messages_view(): void {
@@ -80,9 +79,7 @@ export function update_user_full_name(user_id: number, full_name: string): void
} }
export function update_avatar(user_id: number, avatar_url: string): void { export function update_avatar(user_id: number, avatar_url: string): void {
let url = avatar_url; message_store.update_small_avatar_url(user_id, avatar_url);
url = people.format_small_avatar_url(url);
message_store.update_small_avatar_url(user_id, url);
rerender_messages_view_for_user(user_id); rerender_messages_view_for_user(user_id);
} }

18
web/src/people.ts
View File

@@ -718,12 +718,6 @@ export function exclude_me_from_string(user_ids_string: string): string {
return user_ids.join(","); return user_ids.join(",");
} }
export function format_small_avatar_url(raw_url: string): string {
const url = new URL(raw_url, window.location.origin);
url.search += (url.search ? "&" : "") + "s=50";
return url.href;
}
export function sender_is_bot(message: Message): boolean { export function sender_is_bot(message: Message): boolean {
if (message.sender_id) { if (message.sender_id) {
const person = get_by_user_id(message.sender_id); const person = get_by_user_id(message.sender_id);
@@ -790,21 +784,19 @@ export function user_can_direct_message(recipient_ids_string: string): boolean {
function gravatar_url_for_email(email: string): string { function gravatar_url_for_email(email: string): string {
const hash = md5(email.toLowerCase()); const hash = md5(email.toLowerCase());
const avatar_url = "https://secure.gravatar.com/avatar/" + hash + "?d=identicon"; return "https://secure.gravatar.com/avatar/" + hash + "?d=identicon";
const small_avatar_url = format_small_avatar_url(avatar_url);
return small_avatar_url;
} }
export function small_avatar_url_for_person(person: User): string { export function small_avatar_url_for_person(person: User): string {
if (person.avatar_url) { if (person.avatar_url) {
return format_small_avatar_url(person.avatar_url); return person.avatar_url;
} }
if (person.avatar_url === null) { if (person.avatar_url === null) {
return gravatar_url_for_email(person.email); return gravatar_url_for_email(person.email);
} }
return format_small_avatar_url(`/avatar/${person.user_id}`); return `/avatar/${person.user_id}`;
} }
function medium_gravatar_url_for_email(email: string): string { function medium_gravatar_url_for_email(email: string): string {
@@ -876,7 +868,7 @@ export function small_avatar_url(message: Message): string {
// or if the avatar was missing. We do this verbosely to avoid false // or if the avatar was missing. We do this verbosely to avoid false
// positives on line coverage (we don't do branch checking). // positives on line coverage (we don't do branch checking).
if (message.avatar_url) { if (message.avatar_url) {
return format_small_avatar_url(message.avatar_url); return message.avatar_url;
} }
if (person && person.avatar_url === undefined) { if (person && person.avatar_url === undefined) {
@@ -885,7 +877,7 @@ export function small_avatar_url(message: Message): string {
// required to take advantage of the user_avatar_url_field_optional // required to take advantage of the user_avatar_url_field_optional
// optimization, which saves a huge amount of network traffic on // optimization, which saves a huge amount of network traffic on
// servers with 10,000s of user accounts. // servers with 10,000s of user accounts.
return format_small_avatar_url(`/avatar/${person.user_id}`); return `/avatar/${person.user_id}`;
} }
// For computing the user's email, we first trust the person // For computing the user's email, we first trust the person

2
web/tests/composebox_typeahead.test.js
View File

@@ -1131,7 +1131,7 @@ test("initialize", ({override, override_rewire, mock_template}) => {
actual_value = options.highlighter_html(othello_item); actual_value = options.highlighter_html(othello_item);
expected_value = expected_value =
` <span class="user_circle_empty user_circle"></span>\n` + ` <span class="user_circle_empty user_circle"></span>\n` +
` <img class="typeahead-image" src="http://zulip.zulipdev.com/avatar/${othello.user_id}?s&#x3D;50" />\n` + ` <img class="typeahead-image" src="/avatar/${othello.user_id}" />\n` +
'<div class="typeahead-text-container">\n' + '<div class="typeahead-text-container">\n' +
' <strong class="typeahead-strong-section">Othello, the Moor of Venice</strong> <span class="autocomplete_secondary">othello@zulip.com</span>' + ' <strong class="typeahead-strong-section">Othello, the Moor of Venice</strong> <span class="autocomplete_secondary">othello@zulip.com</span>' +
"</div>\n"; "</div>\n";

17
web/tests/people.test.js
View File

@@ -895,7 +895,7 @@ test_people("message_methods", () => {
assert.equal( assert.equal(
people.small_avatar_url_for_person(maria), people.small_avatar_url_for_person(maria),
"https://secure.gravatar.com/avatar/6dbdd7946b58d8b11351fcb27e5cdd55?d=identicon&s=50", "https://secure.gravatar.com/avatar/6dbdd7946b58d8b11351fcb27e5cdd55?d=identicon",
); );
assert.equal( assert.equal(
people.medium_avatar_url_for_person(maria), people.medium_avatar_url_for_person(maria),
@@ -907,7 +907,7 @@ test_people("message_methods", () => {
muted_users.add_muted_user(30); muted_users.add_muted_user(30);
assert.deepEqual(people.sender_info_for_recent_view_row([30]), [ assert.deepEqual(people.sender_info_for_recent_view_row([30]), [
{ {
avatar_url_small: "http://zulip.zulipdev.com/avatar/30?s=50", avatar_url_small: "/avatar/30",
is_muted: true, is_muted: true,
email: "me@example.com", email: "me@example.com",
full_name: me.full_name, full_name: me.full_name,
@@ -929,7 +929,7 @@ test_people("message_methods", () => {
assert.equal(people.pm_with_url(message), "#narrow/dm/301,302-group"); assert.equal(people.pm_with_url(message), "#narrow/dm/301,302-group");
assert.equal(people.pm_perma_link(message), "#narrow/dm/30,301,302-group"); assert.equal(people.pm_perma_link(message), "#narrow/dm/30,301,302-group");
assert.equal(people.pm_reply_to(message), "Athens@example.com,charles@example.com"); assert.equal(people.pm_reply_to(message), "Athens@example.com,charles@example.com");
assert.equal(people.small_avatar_url(message), "http://charles.com/foo.png?s=50"); assert.equal(people.small_avatar_url(message), "http://charles.com/foo.png");
message = { message = {
type: "private", type: "private",
@@ -939,7 +939,7 @@ test_people("message_methods", () => {
assert.equal(people.pm_with_url(message), "#narrow/dm/302-Maria-Athens"); assert.equal(people.pm_with_url(message), "#narrow/dm/302-Maria-Athens");
assert.equal(people.pm_perma_link(message), "#narrow/dm/30,302-dm"); assert.equal(people.pm_perma_link(message), "#narrow/dm/30,302-dm");
assert.equal(people.pm_reply_to(message), "Athens@example.com"); assert.equal(people.pm_reply_to(message), "Athens@example.com");
assert.equal(people.small_avatar_url(message), "http://zulip.zulipdev.com/legacy.png?s=50"); assert.equal(people.small_avatar_url(message), "legacy.png");
message = { message = {
avatar_url: undefined, avatar_url: undefined,
@@ -947,7 +947,7 @@ test_people("message_methods", () => {
}; };
assert.equal( assert.equal(
people.small_avatar_url(message), people.small_avatar_url(message),
"https://secure.gravatar.com/avatar/6dbdd7946b58d8b11351fcb27e5cdd55?d=identicon&s=50", "https://secure.gravatar.com/avatar/6dbdd7946b58d8b11351fcb27e5cdd55?d=identicon",
); );
blueslip.expect("error", "Unknown user_id in maybe_get_user_by_id"); blueslip.expect("error", "Unknown user_id in maybe_get_user_by_id");
@@ -958,16 +958,13 @@ test_people("message_methods", () => {
}; };
assert.equal( assert.equal(
people.small_avatar_url(message), people.small_avatar_url(message),
"https://secure.gravatar.com/avatar/b48def645758b95537d4424c84d1a9ff?d=identicon&s=50", "https://secure.gravatar.com/avatar/b48def645758b95537d4424c84d1a9ff?d=identicon",
); );
message = { message = {
sender_id: ashton.user_id, sender_id: ashton.user_id,
}; };
assert.equal( assert.equal(people.small_avatar_url(message), `/avatar/${ashton.user_id}`);
people.small_avatar_url(message),
`http://zulip.zulipdev.com/avatar/${ashton.user_id}?s=50`,
);
message = { message = {
type: "private", type: "private",

12
web/tests/search.test.js
View File

@@ -130,7 +130,7 @@ run_test("initialize", ({override, override_rewire, mock_template}) => {
has_image: true, has_image: true,
id: 7, id: 7,
img_src: img_src:
"https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d=identicon&version=1&s=50", "https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d=identicon&version=1",
}, },
}, },
], ],
@@ -149,7 +149,7 @@ run_test("initialize", ({override, override_rewire, mock_template}) => {
has_image: true, has_image: true,
id: 7, id: 7,
img_src: img_src:
"https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d=identicon&version=1&s=50", "https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d=identicon&version=1",
}, },
}, },
], ],
@@ -168,7 +168,7 @@ run_test("initialize", ({override, override_rewire, mock_template}) => {
has_image: true, has_image: true,
id: 7, id: 7,
img_src: img_src:
"https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d=identicon&version=1&s=50", "https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d=identicon&version=1",
}, },
}, },
], ],
@@ -195,13 +195,13 @@ run_test("initialize", ({override, override_rewire, mock_template}) => {
let expected_value = `<div class="search_list_item">\n <span>Search for zo</span>\n</div>\n`; let expected_value = `<div class="search_list_item">\n <span>Search for zo</span>\n</div>\n`;
assert.equal(opts.highlighter_html(source[0]), expected_value); assert.equal(opts.highlighter_html(source[0]), expected_value);
expected_value = `<div class="search_list_item">\n <span>sent by</span>\n <span class="pill-container">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1&amp;s&#x3D;50" />\n <span class="pill-label">\n <span class="pill-value">\n &lt;strong&gt;Zo&lt;/strong&gt;e\n </span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n</div>\n </span>\n</div>\n`; expected_value = `<div class="search_list_item">\n <span>sent by</span>\n <span class="pill-container">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1" />\n <span class="pill-label">\n <span class="pill-value">\n &lt;strong&gt;Zo&lt;/strong&gt;e\n </span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n</div>\n </span>\n</div>\n`;
assert.equal(opts.highlighter_html(source[1]), expected_value); assert.equal(opts.highlighter_html(source[1]), expected_value);
expected_value = `<div class="search_list_item">\n <span>direct messages with</span>\n <span class="pill-container">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1&amp;s&#x3D;50" />\n <span class="pill-label">\n <span class="pill-value">\n &lt;strong&gt;Zo&lt;/strong&gt;e\n </span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n</div>\n </span>\n</div>\n`; expected_value = `<div class="search_list_item">\n <span>direct messages with</span>\n <span class="pill-container">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1" />\n <span class="pill-label">\n <span class="pill-value">\n &lt;strong&gt;Zo&lt;/strong&gt;e\n </span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n</div>\n </span>\n</div>\n`;
assert.equal(opts.highlighter_html(source[2]), expected_value); assert.equal(opts.highlighter_html(source[2]), expected_value);
expected_value = `<div class="search_list_item">\n <span>group direct messages including</span>\n <span class="pill-container">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1&amp;s&#x3D;50" />\n <span class="pill-label">\n <span class="pill-value">\n &lt;strong&gt;Zo&lt;/strong&gt;e\n </span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n</div>\n </span>\n</div>\n`; expected_value = `<div class="search_list_item">\n <span>group direct messages including</span>\n <span class="pill-container">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1" />\n <span class="pill-label">\n <span class="pill-value">\n &lt;strong&gt;Zo&lt;/strong&gt;e\n </span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n</div>\n </span>\n</div>\n`;
assert.equal(opts.highlighter_html(source[3]), expected_value); assert.equal(opts.highlighter_html(source[3]), expected_value);
/* Test sorter */ /* Test sorter */

2
web/tests/search_suggestion.test.js
View File

@@ -894,7 +894,7 @@ test("people_suggestions", ({override, mock_template}) => {
test_full_name("dm:ted@zulip.com", expectedString); test_full_name("dm:ted@zulip.com", expectedString);
test_full_name("dm-including:ted@zulip.com", expectedString); test_full_name("dm-including:ted@zulip.com", expectedString);
expectedString = example_avatar_url + "?s=50"; expectedString = example_avatar_url;
function test_avatar_url(q, avatar_url) { function test_avatar_url(q, avatar_url) {
return suggestions.lookup_table.get(q).description_html.includes(avatar_url); return suggestions.lookup_table.get(q).description_html.includes(avatar_url);

4
web/tests/user_pill.test.js
View File

@@ -37,7 +37,7 @@ const isaac_item = {
type: "user", type: "user",
user_id: isaac.user_id, user_id: isaac.user_id,
deactivated: false, deactivated: false,
img_src: `http://zulip.zulipdev.com/avatar/${isaac.user_id}?s=50`, img_src: `/avatar/${isaac.user_id}`,
status_emoji_info: undefined, status_emoji_info: undefined,
should_add_guest_user_indicator: false, should_add_guest_user_indicator: false,
}; };
@@ -50,7 +50,7 @@ const inaccessible_user_item = {
type: "user", type: "user",
user_id: inaccessible_user_id, user_id: inaccessible_user_id,
deactivated: false, deactivated: false,
img_src: `http://zulip.zulipdev.com/avatar/${inaccessible_user_id}?s=50`, img_src: `/avatar/${inaccessible_user_id}`,
status_emoji_info: undefined, status_emoji_info: undefined,
should_add_guest_user_indicator: false, should_add_guest_user_indicator: false,
}; };