emoji: Migrate popover from Bootstrap to Tippy.

Fixes part of #23632.

web/src/emoji_picker.js

@@ -9,30 +9,27 @@ import render_emoji_showcase from "../templates/emoji_showcase.hbs";
 
 import * as blueslip from "./blueslip";
 import * as compose_ui from "./compose_ui";
+import {media_breakpoints_num} from "./css_variables";
 import * as emoji from "./emoji";
 import * as keydown_util from "./keydown_util";
 import * as message_lists from "./message_lists";
 import * as message_store from "./message_store";
 import {page_params} from "./page_params";
-import * as popovers from "./popovers";
+import * as popover_menus from "./popover_menus";
 import * as reactions from "./reactions";
 import * as rows from "./rows";
 import * as scroll_util from "./scroll_util";
 import * as spectators from "./spectators";
+import * as ui_util from "./ui_util";
 import {user_settings} from "./user_settings";
 import * as user_status_ui from "./user_status_ui";
 
-// Emoji picker is of fixed width and height. Update these
-// whenever these values are changed in `reactions.css`.
-const APPROX_HEIGHT = 375;
-const APPROX_WIDTH = 255;
-
 // The functionalities for reacting to a message with an emoji
 // and composing a message with an emoji share a single widget,
 // implemented as the emoji_popover.
 export let complete_emoji_catalog = [];
 
-let $current_message_emoji_popover_elem;
+let emoji_popover_instance = null;
 let emoji_catalog_last_coordinates = {
     section: 0,
     index: 0,
@@ -43,6 +40,7 @@ let search_is_active = false;
 const search_results = [];
 let section_head_offsets = [];
 let edit_message_id = null;
+let current_message_id = null;
 
 const EMOJI_CATEGORIES = [
     {name: "Popular", icon: "fa-star-o"},
@@ -108,6 +106,7 @@ function show_search_results() {
 }
 
 function show_emoji_catalog() {
+    reset_emoji_showcase();
     $(".emoji-popover-emoji-map").show();
     $(".emoji-popover-category-tabs").show();
     $(".emoji-search-results-container").hide();
@@ -164,7 +163,7 @@ export function rebuild_catalog() {
 const generate_emoji_picker_content = function (id) {
     let emojis_used = [];
 
-    if (id !== undefined) {
+    if (id) {
         emojis_used = reactions.get_emojis_used_by_user_for_message_id(id);
     }
     for (const emoji_dict of emoji.emojis_by_name.values()) {
@@ -189,22 +188,24 @@ function refill_section_head_offsets($popover) {
 }
 
 export function reactions_popped() {
-    return $current_message_emoji_popover_elem !== undefined;
+    return Boolean(emoji_popover_instance);
 }
 
 export function hide_emoji_popover() {
-    $(".has_popover").removeClass("has_popover has_emoji_popover");
+    if (!reactions_popped()) {
+        return;
+    }
+    current_message_id = null;
     if (user_status_ui.user_status_picker_open()) {
         // Re-enable clicking events for other elements after closing
         // the popover.  This is the inverse of the hack of in the
         // handler that opens the "user status modal" emoji picker.
         $(".app, .header, .modal__overlay, #set-user-status-modal").css("pointer-events", "all");
     }
-    if (reactions_popped()) {
+    $(emoji_popover_instance.reference).removeClass("reaction_button_visible");
-        $current_message_emoji_popover_elem.popover("destroy");
+    $(emoji_popover_instance.reference).parent().removeClass("reaction_button_visible");
-        $current_message_emoji_popover_elem.removeClass("reaction_button_visible");
+    emoji_popover_instance.destroy();
-        $current_message_emoji_popover_elem = undefined;
+    emoji_popover_instance = null;
-    }
 }
 
 function get_selected_emoji() {
@@ -433,7 +434,8 @@ function get_next_emoji_coordinates(move_by) {
 }
 
 function change_focus_to_filter() {
-    $(".emoji-popover-filter").trigger("focus");
+    const $popover = $(emoji_popover_instance.popper);
+    $popover.find(".emoji-popover-filter").trigger("focus");
     // If search is active reset current selected emoji to first emoji.
     if (search_is_active) {
         current_section = 0;
@@ -619,71 +621,80 @@ function register_popover_events($popover) {
     });
 }
 
-export function build_emoji_popover(element, id) {
+function get_default_emoji_popover_options() {
-    const $elt = $(element);
+    return {
-    if (id !== undefined) {
+        placement: "top",
-        message_lists.current.select_id(id);
+        popperOptions: {
+            modifiers: [
+                {
+                    // The placement is set to top, but if that placement does not fit,
+                    // the opposite bottom or left placement will be used.
+                    name: "flip",
+                    options: {
+                        // We list both bottom and top here, because
+                        // some callers override the default
+                        // placement.
+                        fallbackPlacements: ["bottom", "top", "left", "right"],
+                    },
+                },
+            ],
+        },
+        onCreate(instance) {
+            if (current_message_id) {
+                message_lists.current.select_id(current_message_id);
             }
-
+            emoji_popover_instance = instance;
-    let placement = popovers.compute_placement($elt, APPROX_HEIGHT, APPROX_WIDTH, true);
+            const $popover = $(instance.popper);
-
+            $popover.addClass("emoji-popover-root");
-    if (placement === "viewport_center") {
+            instance.setContent(ui_util.parse_html(render_emoji_popover()));
-        // For legacy reasons `compute_placement` actually can
+            $popover
-        // return `viewport_center`, but bootstrap doesn't actually
+                .find(".popover-content")
-        // support that.
+                .append(generate_emoji_picker_content(current_message_id));
-        placement = "left";
-    }
-
-    let template = render_emoji_popover();
-
-    // if the window is mobile sized, add the `.popover-flex` wrapper to the emoji
-    // popover so that it will be wrapped in flex and centered in the screen.
-    if (window.innerWidth <= 768) {
-        template = "<div class='popover-flex'>" + template + "</div>";
-    }
-
-    $elt.popover({
-        // temporary patch for handling popover placement of `viewport_center`
-        placement,
-        fix_positions: true,
-        template,
-        title: "",
-        content: generate_emoji_picker_content(id),
-        html: true,
-        trigger: "manual",
-        fixed: true,
-    });
-    $elt.popover("show");
-    $elt.addClass("reaction_button_visible");
-    $elt.closest(".message_row").toggleClass("has_popover has_emoji_popover");
-
-    const $popover = $elt.data("popover").$tip;
-    $popover.find(".emoji-popover-filter").trigger("focus");
-    $current_message_emoji_popover_elem = $elt;
-
             emoji_catalog_last_coordinates = {
                 section: 0,
                 index: 0,
             };
-    show_emoji_catalog();
+        },
-    reset_emoji_showcase();
+        onShow(instance) {
-
+            const $reference = $(instance.reference);
-    $(() => refill_section_head_offsets($popover));
+            $reference.addClass("reaction_button_visible");
+            $reference.parent().addClass("reaction_button_visible");
+        },
+        onMount(instance) {
+            const $popover = $(instance.popper);
+            refill_section_head_offsets($popover);
             register_popover_events($popover);
+            show_emoji_catalog();
+            change_focus_to_filter();
+        },
+        onHidden() {
+            hide_emoji_popover();
+        },
+    };
 }
 
-export function toggle_emoji_popover(element, id) {
+export function toggle_emoji_popover(target, id, additional_popover_options) {
-    const $last_popover_elem = $current_message_emoji_popover_elem;
+    if (id) {
-    popovers.hide_all();
+        current_message_id = id;
-    if ($last_popover_elem !== undefined && $last_popover_elem.get()[0] === element) {
-        // We want it to be the case that a user can dismiss a popover
-        // by clicking on the same element that caused the popover.
-        return;
     }
 
-    build_emoji_popover(element, id);
+    let show_as_overlay = false;
-}
 
+    // If the window is mobile-sized, we will render the
+    // emoji popover centered on the screen with the overlay.
+    if (window.innerWidth <= media_breakpoints_num.md) {
+        show_as_overlay = true;
+    }
+
+    popover_menus.toggle_popover_menu(
+        target,
+        {
+            ...get_default_emoji_popover_options(),
+            ...additional_popover_options,
+        },
+        {show_as_overlay},
+    );
+}
 export function register_click_handlers() {
     $(document).on("click", ".emoji-popover-emoji.reaction", function (e) {
         // When an emoji is clicked in the popover,
@@ -729,7 +740,7 @@ export function register_click_handlers() {
         toggle_emoji_popover(compose_click_target);
     });
 
-    $("#main_div").on("click", ".reaction_button", function (e) {
+    $("#main_div").on("click", ".emoji-message-control-button-container", function (e) {
         e.stopPropagation();
 
         if (page_params.is_spectator) {
@@ -738,7 +749,7 @@ export function register_click_handlers() {
         }
 
         const message_id = rows.get_message_id(this);
-        toggle_emoji_popover(this, message_id);
+        toggle_emoji_popover(e.currentTarget, message_id, {placement: "bottom"});
     });
 
     $("body").on("click", ".emoji-popover-tab-item", function (e) {
@@ -780,12 +791,17 @@ export function register_click_handlers() {
     $("body").on("click", "#set-user-status-modal #selected_emoji", (e) => {
         e.preventDefault();
         e.stopPropagation();
-        toggle_emoji_popover(e.target);
+        toggle_emoji_popover(e.target, undefined, {placement: "bottom"});
+        if (reactions_popped()) {
             // Because the emoji picker gets drawn on top of the user
             // status modal, we need this hack to make clicking outside
             // the emoji picker only close the emoji picker, and not the
             // whole user status modal.
-        $(".app, .header, .modal__overlay, #set-user-status-modal").css("pointer-events", "none");
+            $(".app, .header, .modal__overlay, #set-user-status-modal").css(
+                "pointer-events",
+                "none",
+            );
+        }
     });
 
     $(document).on("click", ".emoji-popover-emoji.status-emoji", function (e) {

web/src/hotkey.js

@@ -1000,8 +1000,11 @@ export function process_hotkey(e, hotkey) {
         case "toggle_reactions_popover": {
             const $row = message_lists.current.selected_row();
             emoji_picker.toggle_emoji_popover(
-                msg.sent_by_me ? $row.find(".actions_hover")[0] : $row.find(".reaction_button")[0],
+                msg.sent_by_me
+                    ? $row.find(".message-actions-menu-button")[0]
+                    : $row.find(".emoji-message-control-button-container")[0],
                 msg.id,
+                {placement: "bottom"},
             );
             return true;
         }

web/src/popover_menus.js

@@ -895,11 +895,9 @@ export function initialize() {
                 // emoji_picker which we don't want to hide after actions popover is hidden.
                 e.stopPropagation();
                 e.preventDefault();
-                emoji_picker.toggle_emoji_popover(
+                emoji_picker.toggle_emoji_popover(instance.reference.parentElement, message_id, {
-                    instance.reference.parentElement,
+                    placement: "bottom",
-                    message_id,
+                });
-                    true,
-                );
                 instance.hide();
             });
 

web/styles/popovers.css

@@ -738,7 +738,8 @@ ul {
     left: -1px;
 }
 
-.giphy-popover {
+.giphy-popover,
+.emoji-popover-root {
     .tippy-content {
         /* We remove the default padding from this container
            as it is not necessary for the Giphy popover. */
@@ -750,6 +751,18 @@ ul {
     }
 }
 
+.emoji-popover-root {
+    /* The emoji popover has a different background color for the
+       header and footer, so we customize the arrow to match this color. */
+    .tippy-box[data-placement="top"] .tippy-arrow::before {
+        border-top-color: hsl(0deg 0% 93%);
+    }
+
+    .tippy-box[data-placement="bottom"] .tippy-arrow::before {
+        border-bottom-color: hsl(0deg 0% 93%);
+    }
+}
+
 #giphy_grid_in_popover {
     /* 300px of GIPHY grid + 5px is the extra gutter space
      * between gif columns. */

web/styles/reactions.css

@@ -81,10 +81,13 @@
         background-color: hsl(0deg 0% 98%);
     }
 
-    .reaction_button {
+    .reaction_button,
+    .emoji-message-control-button-container {
         display: flex;
         align-items: center;
+    }
 
+    .reaction_button {
         & i {
             font-size: 1em;
         }
@@ -170,7 +173,7 @@
 
             background-color: hsl(0deg 0% 93%);
 
-            border-radius: 5px 5px 0 0;
+            border-radius: 3px 3px 0 0;
 
             .fa-search {
                 position: absolute;
@@ -277,6 +280,7 @@
         background-color: hsl(0deg 0% 93%);
         min-height: 44px;
         width: 250px;
+        border-radius: 0 0 3px 3px;
 
         .emoji-preview {
             position: absolute;

web/styles/zulip.css

@@ -1203,7 +1203,7 @@ td.pointer {
         text-align: center;
         color: var(--color-message-action-visible);
 
-        > i {
+        & i {
             vertical-align: middle;
             /* TODO: Math for these values, possibly with variables.
                In short, the icon body is 16px square; the current

web/templates/compose_control_buttons.hbs

@@ -6,8 +6,9 @@
     <a role="button" class="markdown_preview compose_control_button fa fa-eye" aria-label="{{t 'Preview' }}" tabindex=0 data-tippy-content="{{t 'Preview' }}"></a>
     <a role="button" class="undo_markdown_preview compose_control_button fa fa-edit" aria-label="{{t 'Write' }}" tabindex=0 style="display:none;" data-tippy-content="{{t 'Write' }}"></a>
     <a role="button" class="compose_control_button fa fa-video-camera video_link" aria-label="{{t 'Add video call' }}" tabindex=0 data-tippy-content="{{t 'Add video call' }}"></a>
-    <a role="button" class="compose_control_button fa fa-phone audio_link" aria-label="{{t 'Add audio call' }}" tabindex=0 data-tippy-content="{{t 'Add audio call' }}"></a>
+    <div class="compose_control_button_container" data-tippy-content="{{t 'Add emoji' }}">
-    <a role="button" class="compose_control_button fa fa-smile-o emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0 data-tippy-content="{{t 'Add emoji' }}"></a>
+        <a role="button" class="compose_control_button fa fa-smile-o emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0></a>
+    </div>
     <a role="button" class="compose_control_button fa fa-clock-o time_pick" aria-label="{{t 'Add global time' }}" tabindex=0 data-tooltip-template-id="add-global-time-tooltip" data-tippy-maxWidth="none"></a>
     <div class="compose_control_button_container {{#unless giphy_enabled }}hide{{/unless}}" data-tippy-content="{{t 'Add GIF' }}">
         <a role="button" class="compose_control_button compose_gif_icon zulip-icon zulip-icon-gif" aria-label="{{t 'Add GIF' }}" tabindex=0></a>

web/templates/emoji_popover.hbs

@@ -1,7 +1,4 @@
-<div class="popover emoji-info-popover">
+<div class="emoji-info-popover">
-    <div class="arrow"></div>
+    <div class="popover-content"></div>
-    <div class="popover-content">
-        <div></div>
-    </div>
     <div class="emoji-showcase-container"></div>
 </div>

web/templates/message_controls.hbs

@@ -5,8 +5,10 @@
 
     {{#unless msg/sent_by_me}}
     <div class="reaction_button message_control_button" data-tooltip-template-id="add-emoji-tooltip-template">
+        <div class="emoji-message-control-button-container">
             <i class="zulip-icon zulip-icon-smile" aria-label="{{t 'Add emoji reaction' }} (:)" role="button" aria-haspopup="true" tabindex="0"></i>
         </div>
+    </div>
     {{/unless}}
 
     {{#unless msg/locally_echoed}}

web/templates/message_reactions.hbs

@@ -2,6 +2,8 @@
     {{> message_reaction}}
 {{/each}}
 <div class="reaction_button" data-tippy-content="{{t 'Add emoji reaction' }}" aria-label="{{t 'Add emoji reaction' }} (:)">
+    <div class="emoji-message-control-button-container">
         <i class="zulip-icon zulip-icon-smile" role="button" aria-haspopup="true" tabindex="0" aria-label="{{t 'Add emoji reaction' }} (:)"></i>
         <div class="message_reaction_count">+</div>
+    </div>
 </div>

web/tests/hotkey.test.js

@@ -101,7 +101,7 @@ message_lists.current = {
     },
     selected_row() {
         const $row = $.create("selected-row-stub");
-        $row.set_find_results(".actions_hover", []);
+        $row.set_find_results(".message-actions-menu-button", []);
         return $row;
     },
     selected_message() {