1127898 - [Messages] Send button is misaligned if message input has more than one line of text

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::SMS, defect)

Description

[Oleg Zasypkin [:azasypkin]]

Attachment: issue.png

STR:

* Open Messages app and navigate to New Message (Composer) panel;
* Enter few lines of text and observe send button;

Expected result: send button always stays at the bottom as well as "add attachment" button;

Actual result: send button is aligned to the top of message input (see attachment).

I've investigated it a bit, and as far as I can tell it's something very recent (v2.2 isn't affected) and Gecko related since Messages app from master works perfectly well with v2.2 Gecko, but not vice versa.

Comment 1

[Brogan Zumwalt [Inactive]]

Regression Window:

Last working mozilla-inbound build:
Device:  Flame 3.0
BuildID: 20150123124431
Gaia: 2535321f1bd55e68fd52291b193693a8995f8e62
Gecko: 5555ee7490fb
Version: 38.0a1 (3.0)
Firmware: V18D-1
User Agent: Mozilla/5.0 (Mobile; rv:38.0) Gecko/38.0 Firefox/38.0

First broken mozilla-inbound build:
Device: Flame 3.0
Build ID: 20150123141637
Gaia: 2535321f1bd55e68fd52291b193693a8995f8e62
Gecko: d87c50c30329
Version: 38.0a1 (3.0)
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:38.0) Gecko/38.0 Firefox/38.0


Working Gaia with Broken Gecko issue DOES reproduce:
Gaia: 2535321f1bd55e68fd52291b193693a8995f8e62
Gecko: d87c50c30329

Working Gecko with Broken Gaia issue does NOT reproduce:
Gaia: 2535321f1bd55e68fd52291b193693a8995f8e62
Gecko: 5555ee7490fb

Mozilla-Inbound Pushlog:
http://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=5555ee7490fb&tochange=d87c50c30329

Appears to be due to bug 1054010

Comment 2

[KTucker [:KTucker][Inactive 3/4/2016]]

Daniel, can you take a look at this please? Looks like this might have been caused by the work done on bug 1054010.

Comment 3

[Julien Wajsberg [:julienw]]

Daniel, please suggest if you think we need to precise our CSS.

Comment 4

[Daniel Holbert [:dholbert]]

Yup! I might not get to it until Mondayish though. (Likely a real Gecko regression; you shouldn't have to tweak your CSS.)

Thanks for the heads-up, & I'll let you know when I know more.

Comment 5

[Daniel Holbert [:dholbert]]

Yeah, it looks like we're getting confused by "height:100%" on .composer-button-container here.  (Since its parent is sized based on its children, we should really be treating the "height:100%" the same as "height:auto"; but we're not.)

Good news, though - you actually don't want "height:100%" there anyway. It should be being treated as "height:auto" anyway, and then we end up later stretching the height to match the container's height via having "align-self:stretch" (by default). I've confirmed locally that removing "height:100%" allows "align-self:stretch" to work its magic and fix this bug.

I'll file a separate bug on figuring out the gecko behavior-change here, but I think that "height:100%" removal is the simplest & quickest fix for this, and it also happens to be an improvement (rather than a hacky workaround) since the "height:100%" is unnecessary here anyway. :)

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: pull request

I verified locally that this fixes the issue -- the "send" icon stays snapped to the bottom (because its container stretches once again to fit its parent).

Comment 7

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #5)
> I'll file a separate bug on figuring out the gecko behavior-change here

(I filed bug 1128354 for this.)

Comment 8

[Oleg Zasypkin [:azasypkin]]

Comment on attachment 8557670 [details] [review]
pull request

Thanks for the quick fix! I don't really remember why we had "height: 100%" in the first place, probably we didn't know about default "align-self:stretch", anyway now it's good :)

Comment 9

[Daniel Holbert [:dholbert]]

Thanks! Tagging as 'checkin-needed', since IIRC that's the way to get PRs merged; feel free to clear if I'm mistaken.

Comment 10

[Julien Wajsberg [:julienw]]

(In reply to Daniel Holbert [:dholbert] from comment #9)
> Thanks! Tagging as 'checkin-needed', since IIRC that's the way to get PRs
> merged; feel free to clear if I'm mistaken.

It's not the only way, but it works fine ;)

Thanks for your work !
I think the "height: 100%" comes from before we used flex here.
At least it made us find the regression for you :p

Comment 11

[Carsten Book [:Tomcat]]

https://github.com/mozilla-b2g/gaia/commit/43793904d5d2cac77cdee4c72186854fb0f25fb2

Comment 12

[Shally Li（leave from Mozilla）]

This bug has been verified as "pass" on latest Nightly build of Flame v3.0 by the STR in Comment 0.

Actual results: "Send" button always stays at the bottom as well as "add attachment" button.
See attachment: verified_v3.0.png
Reproduce rate: 0/10


Device: Flame v3.0 build(Verified)
Build ID               20150623010204
Gaia Revision          311c4e59936a407e64509f54fecb440d8a78e3c8
Gaia Date              2015-06-20 20:21:42
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/be81b8d6fae9
Gecko Version          41.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150623.043033
Firmware Date          Tue Jun 23 04:30:44 EDT 2015
Bootloader             L1TC000118D0

Comment 13

[Shally Li（leave from Mozilla）]

Attachment: verified_v3.0.png