1176277 - Text chat entries view should take up the whole height of the text chat view, when the input box isn't shown

Status: VERIFIED FIXED

(Hello (Loop) :: Client, defect, P1)

Description

[Mark Banner (:standard8)]

Attachment: Screen shot

See attached screenshot, currently when we've got the input box is disabled for text chat, the text entries view doesn't take up the additional height.

Comment 1

[Mark Banner (:standard8)]

Attachment: Loop's text chat entries view should take up the whole height of the text chat view, when the input box isn't shown.

This fixes the issue - we now change the height if text chat is disabled for whatever reason.

Comment 2

[Dan Mosedale (:dmosedale, :dmose)]

Comment on attachment 8624784 [details] [diff] [review]
Loop's text chat entries view should take up the whole height of the text chat view, when the input box isn't shown.

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

r=dmose, with comments addressed as you see fit.

::: browser/components/loop/content/shared/css/conversation.css
@@ +1178,5 @@
>  
>  .media-wrapper > .text-chat-view > .text-chat-entries {
>    /* 40px is the height of .text-chat-box. */
>    height: calc(100% - 40px);
>  }

So is the root cause here that while text-chat-view itself flexes, it also has display: block, meaning that its children can't flex, so we end up doing these hand-calculations like the one above, and overrides like the one below?

@@ +1184,5 @@
> +.media-wrapper > .text-chat-disabled > .text-chat-entries {
> +  /* When text chat is disabled, the entries box should be 100% height. */
> +  height: 100%;
> +}
> +

Any particular reason this, and the next change, require the .media-wrapper part of this selector

Comment 3

[Mark Banner (:standard8)]

(In reply to Dan Mosedale (:dmose) - needinfo? me for response from comment #2)
> >  .media-wrapper > .text-chat-view > .text-chat-entries {
> >    /* 40px is the height of .text-chat-box. */
> >    height: calc(100% - 40px);
> >  }
> 
> So is the root cause here that while text-chat-view itself flexes, it also
> has display: block, meaning that its children can't flex, so we end up doing
> these hand-calculations like the one above, and overrides like the one below?

Yes. If it flexed, then it would flex out of the column and mess up everything unfortunately.

> @@ +1184,5 @@
> > +.media-wrapper > .text-chat-disabled > .text-chat-entries {
> > +  /* When text chat is disabled, the entries box should be 100% height. */
> > +  height: 100%;
> > +}
> 
> Any particular reason this, and the next change, require the .media-wrapper
> part of this selector

This is semi temporarily until we share the new media layout into new locations (e.g. desktop conversation window). When we do that, then we might need to alter these a bit.

I'll add a comment.

Comment 4

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/087915962252

Comment 5

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/087915962252

Comment 6

[Bogdan Maris, Desktop Test Engineering]

I could not reproduce this issue on a old Nightly build (2015-06-19). Though I did some exploratory testing using Firefox 41.0 RC and did not encounter any issues. 
Mark could you please take a quick look at Firefox 41.0 RC to see if the issues is fixed?

Comment 7

[Mark Banner (:standard8)]

I think I may have actually filed this against standalone with narrow-widths, though it'd equally apply to the popped-out conversation window.

In any case, this does appear to be working correctly in both situations.