mirror of
				https://github.com/zulip/zulip.git
				synced 2025-11-03 21:43:21 +00:00 
			
		
		
		
	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:
		
				
					committed by
					
						
						Tim Abbott
					
				
			
			
				
	
			
			
			
						parent
						
							87a0fa0c8c
						
					
				
				
					commit
					b89d47a147
				
			@@ -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);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -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
 | 
			
		||||
 
 | 
			
		||||
@@ -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=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";
 | 
			
		||||
 
 | 
			
		||||
@@ -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",
 | 
			
		||||
 
 | 
			
		||||
@@ -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=identicon&version=1&s=50" />\n    <span class="pill-label">\n        <span class="pill-value">\n            <strong>Zo</strong>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=identicon&version=1" />\n    <span class="pill-label">\n        <span class="pill-value">\n            <strong>Zo</strong>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=identicon&version=1&s=50" />\n    <span class="pill-label">\n        <span class="pill-value">\n            <strong>Zo</strong>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=identicon&version=1" />\n    <span class="pill-label">\n        <span class="pill-value">\n            <strong>Zo</strong>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=identicon&version=1&s=50" />\n    <span class="pill-label">\n        <span class="pill-value">\n            <strong>Zo</strong>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=identicon&version=1" />\n    <span class="pill-label">\n        <span class="pill-value">\n            <strong>Zo</strong>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 */
 | 
			
		||||
 
 | 
			
		||||
@@ -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);
 | 
			
		||||
 
 | 
			
		||||
@@ -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,
 | 
			
		||||
};
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user