compose_tooltip: Remove delay for invalid messages.

Does what 714def080f
was trying to do without the side effects.
Fixes: 714def080f

web/src/compose_actions.ts

@@ -146,7 +146,7 @@ function clear_box(): void {
         "disabled-on-hover",
     );
     // Reset send button status.
-    $(".message-send-controls").removeClass("disabled-message-send-controls");
+    $("#compose-send-button").removeClass("disabled-message-send-controls");
 }
 
 let autosize_callback_opts: ComposeActionsStartOpts;

web/src/compose_setup.js

@@ -76,7 +76,7 @@ export function initialize() {
         compose_validate.update_send_button_status();
     });
     $("#compose-send-button").on("mouseleave", () => {
-        $(".message-send-controls").removeClass("disabled-message-send-controls");
+        $("#compose-send-button").removeClass("disabled-message-send-controls");
     });
 
     $("textarea#compose-textarea").on("input propertychange", () => {

web/src/compose_tooltips.ts

@@ -209,7 +209,7 @@ export function initialize(): void {
     });
 
     tippy.delegate("body", {
-        target: "#compose-send-button",
+        target: "#compose-send-button:not(.disabled-message-send-controls)",
         delay: EXTRA_LONG_HOVER_DELAY,
         // By default, tippyjs uses a trigger value of "mouseenter focus",
         // but by specifying "mouseenter", this will prevent showing the
@@ -217,18 +217,11 @@ export function initialize(): void {
         trigger: "mouseenter",
         appendTo: () => document.body,
         onShow(instance) {
-            // Don't show send-area tooltips if the popover is displayed or if the send button is disabled.
+            // Don't show send-area tooltips if the popover is displayed.
             if (popover_menus.is_scheduled_messages_popover_displayed()) {
                 return false;
             }
-
-            if ($(".message-send-controls").hasClass("disabled-message-send-controls")) {
-                instance.setContent(
-                    compose_recipient.get_posting_policy_error_message() ||
-                        compose_validate.get_disabled_send_tooltip(),
-                );
-                return undefined;
-            } else if (user_settings.enter_sends) {
+            if (user_settings.enter_sends) {
                 instance.setContent(parse_html($("#send-enter-tooltip-template").html()));
             } else {
                 instance.setContent(parse_html($("#send-ctrl-enter-tooltip-template").html()));
@@ -237,6 +230,22 @@ export function initialize(): void {
         },
     });
 
+    tippy.delegate("body", {
+        target: "#compose-send-button.disabled-message-send-controls",
+        // 350px at 14px/1em
+        maxWidth: "25em",
+        onShow(instance) {
+            instance.setContent(
+                compose_recipient.get_posting_policy_error_message() ||
+                    compose_validate.get_disabled_send_tooltip(),
+            );
+        },
+        appendTo: () => document.body,
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
+
     tippy.delegate("body", {
         target: ".narrow_to_compose_recipients",
         delay: LONG_HOVER_DELAY,

web/src/compose_validate.ts

@@ -104,7 +104,7 @@ export function set_recipient_disallowed(status: boolean): void {
 
 export function update_send_button_status(): void {
     const recipient_type = compose_state.get_message_type();
-    $(".message-send-controls").toggleClass(
+    $("#compose-send-button").toggleClass(
         "disabled-message-send-controls",
         upload_in_progress ||
             no_channel_selected ||

web/src/composebox_typeahead.ts

@@ -381,7 +381,7 @@ function handle_keydown(
                     e.preventDefault();
                     if (
                         compose_validate.validate_message_length($("#send_message_form")) &&
-                        !$(".message-send-controls").hasClass("disabled-message-send-controls")
+                        !$("#compose-send-button").hasClass("disabled-message-send-controls")
                     ) {
                         on_enter_send();
                     }

web/styles/compose.css

@@ -1455,18 +1455,16 @@ textarea.new_message_textarea {
         flex-direction: column-reverse;
     }
 
-    &.disabled-message-send-controls {
-        & button {
-            cursor: default;
-            opacity: 0.5;
-        }
-    }
-
     .compose-button-disabled {
         pointer-events: none;
     }
 }
 
+#compose-send-button.disabled-message-send-controls {
+    cursor: default;
+    opacity: 0.5;
+}
+
 .drag {
     display: none;
     height: 18px;

web/tests/lib/compose_helpers.cjs

@@ -146,7 +146,7 @@ class FakeComposeBox {
 
         assert.ok(this.$content_textarea.hasClass("textarea-over-limit"));
         assert.ok($(".message-limit-indicator").hasClass("textarea-over-limit"));
-        assert.ok(!$(".message-send-controls").hasClass("disabled-message-send-controls"));
+        assert.ok(!$("#compose-send-button").hasClass("disabled-message-send-controls"));
     }
 
     assert_message_size_is_under_the_limit(desired_html) {
@@ -161,7 +161,7 @@ class FakeComposeBox {
 
         assert.ok(!this.$content_textarea.hasClass("textarea-over-limit"));
         assert.ok(!$(".message-limit-indicator").hasClass("textarea-over-limit"));
-        assert.ok(!$(".message-send-controls").hasClass("disabled-message-send-controls"));
+        assert.ok(!$("#compose-send-button").hasClass("disabled-message-send-controls"));
     }
 }
 

web/tests/upload.test.cjs

@@ -154,7 +154,7 @@ test("show_error_message", ({mock_template}) => {
     $("#compose-send-button").prop("disabled", true);
 
     upload.show_error_message(upload.compose_config, "Error message");
-    assert.ok(!$(".message-send-controls").hasClass("disabled-message-send-controls"));
+    assert.ok(!$("#compose-send-button").hasClass("disabled-message-send-controls"));
     assert.ok(banner_shown);
 
     mock_template("compose_banner/upload_banner.hbs", false, (data) => {
@@ -198,9 +198,9 @@ test("upload_files", async ({mock_template, override, override_rewire}) => {
         assert.equal(config.mode, "compose");
     });
     const config = upload.compose_config;
-    $(".message-send-controls").removeClass("disabled-message-send-controls");
+    $("#compose-send-button").removeClass("disabled-message-send-controls");
     await upload.upload_files(uppy, config, []);
-    assert.ok(!$(".message-send-controls").hasClass("disabled-message-send-controls"));
+    assert.ok(!$("#compose-send-button").hasClass("disabled-message-send-controls"));
 
     let banner_shown = false;
     mock_template("compose_banner/upload_banner.hbs", false, (data) => {
@@ -239,7 +239,7 @@ test("upload_files", async ({mock_template, override, override_rewire}) => {
     $("#compose .undo_markdown_preview").on("click", () => {
         markdown_preview_hide_button_clicked = true;
     });
-    $(".message-send-controls").removeClass("disabled-message-send-controls");
+    $("#compose-send-button").removeClass("disabled-message-send-controls");
     $("#compose_banners .upload_banner").remove();
     $("#compose .undo_markdown_preview").show();
 
@@ -250,7 +250,7 @@ test("upload_files", async ({mock_template, override, override_rewire}) => {
     });
     override(compose_state, "get_message_type", () => "stream");
     await upload.upload_files(uppy, config, files);
-    assert.ok($(".message-send-controls").hasClass("disabled-message-send-controls"));
+    assert.ok($("#compose-send-button").hasClass("disabled-message-send-controls"));
     assert.ok(banner_shown);
     assert.ok(compose_ui_insert_syntax_and_focus_called);
     assert.ok(compose_ui_autosize_textarea_called);