1095603 - Add CSS transition for contact tooltip size changes

Status: RESOLVED WONTFIX

(Instantbird Graveyard :: Other, defect)

Description

[aleth [:aleth]]

When a tooltip grows due to e.g. IRC whois info arriving, the transition looks jarring. A CSS transition would help.

Comment 1

[sourab.reddy2k14]

Attachment: When we hover over a participant's name, updateTooltipInfo() is called, it fills the tooltip with rows of fetched info and shows it, adding timeouts makes it look like a transition.

When we hover over a participant's name, updateTooltipInfo() is called, it fills the tooltip with rows of fetched info and shows it at once, making it look jarring. Adding timeouts between successive addition of rows in the tooltip helps the width of the tooltip grow gradually, makes the transition look smoother.

Comment 2

[Patrick Cloke [:clokep]]

Comment on attachment 8730728 [details] [diff] [review]
When we hover over a participant's name,  updateTooltipInfo() is called, it fills the tooltip with rows of fetched info and shows it, adding timeouts makes it look like a transition.

Review of attachment 8730728 [details] [diff] [review]:
-----------------------------------------------------------------

I think we were interested in using the CSS transition property (https://developer.mozilla.org/en-US/docs/Web/CSS/transition) to perform this instead of doing it in JavaScript. Have you tried this? It should make it much simpler.

Comment 3

[sourab.reddy2k14]

I tried using CSS transitions didn't work. I will try again and re-submit a patch in CSS if possible.

Comment 4

[sourab.reddy2k14]

Attachment: Added fadeIn and grow transitions to the tooltip, to avoid the jarring effect when it appears at once .

Added fadeIn and grow transitions to the the tooltip, by adding CSS opacity transition to the rows element and a font-size transition to individual row of the tooltip. The transitions are set/reset through JS.

Comment 5

[aleth [:aleth]]

Comment on attachment 8731232 [details] [diff] [review]
Added fadeIn and grow transitions to the tooltip, to avoid the jarring effect when it appears at once .

Review of attachment 8731232 [details] [diff] [review]:
-----------------------------------------------------------------

This looks much better already!

::: chat/content/imtooltip.xml
@@ +178,5 @@
>             // Row with this label already exists - just update.
>             description = row.querySelector("description");
> +
> +           // Resetting the grow transition
> +           row.style.fontSize = "0.5em";

Please don't use .style. Use a state attribute (row.setAttribute) and CSS classes dependent on the attribute (see the contacts in the blist for an example).

::: chat/themes/imtooltip.css
@@ +69,5 @@
>    margin-left: 0 !important;
>  }
>  
> +.tooltipRows row{
> +  font-size: 0.5em;

Can you use something other than font-size? That seems very expensive.

Won't height or max-height work?

Comment 6

[sourab.reddy2k14]

Sorry for the delay ( was busy with exams, boring student life -_- !)

I made the requested changes, but I am stuck at a small problem ( being horrible with CSS, but trying to improve )

1) I used setAttribute() for the opacity transition  i.e fadeIn , hurray it worked.

2) for grow, I tried replacing font-size with height/min-height/max-height/flex-grow, but it didn't work out, so this is my problem. I studied the blist for reference , understood the height transition, but I think this situation is slightly different. Following is the detailed structure of the tooltip for help:

---------------------------------------    <--- #largeTooltip
| user details, status                |
| blah blah blah                      |
| ----------------------------------- <-- .tooltipRows ( grid containing 2 columns with 2nd column flex=1)                                        
||                                   ||
||                                   ||
||                                   ||
| ----------------------------------- |
---------------------------------------

When the user hovers over a participant name , the info is fetched and dynamically inserted inside the inner grid .tooltipRows

the dynamically created row structure:

| label description |  , these row have attribute align = baseline set.

Waiting for your reply, so that this bug can be solved soon.

Comment 7

[aleth [:aleth]]

If you merge two buddies into one contact, and then look at the tooltip for the contact, you will see there is already a working transition for the height at the bottom of the tooltip (without your patch). Maybe you can use similar code to that?

Comment 8

[Sylvestre Ledru [:Sylvestre]]

On the behalf of Florian:
Closing bugs related to the Instantbird UI as WONTFIX, as the development of the standalone chat client Instantbird has stopped. Instantbird users are encouraged to migrate to Thunderbird. The user interface of instant messaging in Thunderbird will feel familiar, as the Thunderbird IM support started as a fork of Instantbird.