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

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

View File

@ -1,6 +1,5 @@
import * as message_lists from "./message_lists";
import * as message_store from "./message_store";
import * as people from "./people";
import type {UserStatusEmojiInfo} from "./user_status";
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 {
let url = avatar_url;
url = people.format_small_avatar_url(url);
message_store.update_small_avatar_url(user_id, url);
message_store.update_small_avatar_url(user_id, avatar_url);
rerender_messages_view_for_user(user_id);
}

View File

@ -718,12 +718,6 @@ export function exclude_me_from_string(user_ids_string: string): string {
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 {
if (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 {
const hash = md5(email.toLowerCase());
const avatar_url = "https://secure.gravatar.com/avatar/" + hash + "?d=identicon";
const small_avatar_url = format_small_avatar_url(avatar_url);
return small_avatar_url;
return "https://secure.gravatar.com/avatar/" + hash + "?d=identicon";
}
export function small_avatar_url_for_person(person: User): string {
if (person.avatar_url) {
return format_small_avatar_url(person.avatar_url);
return person.avatar_url;
}
if (person.avatar_url === null) {
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 {
@ -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
// positives on line coverage (we don't do branch checking).
if (message.avatar_url) {
return format_small_avatar_url(message.avatar_url);
return message.avatar_url;
}
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
// optimization, which saves a huge amount of network traffic on
// 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

View File

@ -1131,7 +1131,7 @@ test("initialize", ({override, override_rewire, mock_template}) => {
actual_value = options.highlighter_html(othello_item);
expected_value =
` <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' +
' <strong class="typeahead-strong-section">Othello, the Moor of Venice</strong> <span class="autocomplete_secondary">othello@zulip.com</span>' +
"</div>\n";

View File

@ -895,7 +895,7 @@ test_people("message_methods", () => {
assert.equal(
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(
people.medium_avatar_url_for_person(maria),
@ -907,7 +907,7 @@ test_people("message_methods", () => {
muted_users.add_muted_user(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,
email: "me@example.com",
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_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.small_avatar_url(message), "http://charles.com/foo.png?s=50");
assert.equal(people.small_avatar_url(message), "http://charles.com/foo.png");
message = {
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_perma_link(message), "#narrow/dm/30,302-dm");
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 = {
avatar_url: undefined,
@ -947,7 +947,7 @@ test_people("message_methods", () => {
};
assert.equal(
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");
@ -958,16 +958,13 @@ test_people("message_methods", () => {
};
assert.equal(
people.small_avatar_url(message),
"https://secure.gravatar.com/avatar/b48def645758b95537d4424c84d1a9ff?d=identicon&s=50",
"https://secure.gravatar.com/avatar/b48def645758b95537d4424c84d1a9ff?d=identicon",
);
message = {
sender_id: ashton.user_id,
};
assert.equal(
people.small_avatar_url(message),
`http://zulip.zulipdev.com/avatar/${ashton.user_id}?s=50`,
);
assert.equal(people.small_avatar_url(message), `/avatar/${ashton.user_id}`);
message = {
type: "private",

View File

@ -130,7 +130,7 @@ run_test("initialize", ({override, override_rewire, mock_template}) => {
has_image: true,
id: 7,
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,
id: 7,
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,
id: 7,
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`;
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);
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);
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);
/* Test sorter */

View File

@ -894,7 +894,7 @@ test("people_suggestions", ({override, mock_template}) => {
test_full_name("dm: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) {
return suggestions.lookup_table.get(q).description_html.includes(avatar_url);

View File

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