In Bug 963018, we refreshed the recipients panel without changing how the recipients panel works. However, if the panel takes only one line, it should take less visible space than what has been done in bug 963018. See spec: attachment 8394786 [details] and attachment 8394787 [details] In this bug, we'll see if this is possible to do it in CSS only, and if not, we'll either abandon this requirement or implement a efficient-enough JS-based solution.

Will take it to provide JS solution

Comment on attachment 8464157 [details] GitHub branch URL (JS solution) Hey Julien, Here is WIP with JS solution, it would be great to get your feedback\suggestions as early as possible before any further improvements\investigations of this approach. Thanks!

Comment on attachment 8464157 [details] GitHub branch URL (JS solution) feedback+ but I think we need to have something when the user is typing and moving from one line to 2 lines (before assimilating the recipient).

(In reply to Julien Wajsberg [:julienw] from comment #4) > Comment on attachment 8464157 [details] > GitHub branch URL (JS solution, WIP) > > feedback+ but I think we need to have something when the user is typing and > moving from one line to 2 lines (before assimilating the recipient). Thanks for feedback! ni? so that you can try it on device once you have some time. Thanks!

Yep, this works fine, and my comment 4 seems to be already working fine !

Comment on attachment 8464157 [details] GitHub branch URL (JS solution) Hey Julien, I think it's ready for the first round of review :) Could you please take a look (I've left a few question at github)? Not related to this bug, but just curious: while measuring performance\reflows\repaints, I've noticed that "To:" label is always repainted on user input, but if "To:" is wrapped in additional block element it's not repainted anymore, do you know what happens here? Thanks!

Comment on attachment 8464157 [details] GitHub branch URL (JS solution) I don't see any outstanding performance issue. Some simple comments and I think we're good after this!

Comment on attachment 8464157 [details] GitHub branch URL (JS solution) Fixed your suggestions, please take a look again. Thanks!

Comment on attachment 8464157 [details] GitHub branch URL (JS solution) Still one nit about the unit test: I'd prefer that we don't use "emit" from mock_recipients because it uses some custom code from the mock. I'd prefer that we use sinon's yield function with a stub so that we exercize the tested code directly. (I admit that sinon's yield is probably more complex than the mock code, but it's common and unit tested ;) ).

Comment on attachment 8464157 [details] GitHub branch URL (JS solution) Thanks! Using "sinon.yield" instead of "emit" now.

Comment on attachment 8464157 [details] GitHub branch URL (JS solution) r=me Please wait for a full Try run before merging :)

(In reply to Julien Wajsberg [:julienw] from comment #12) > Comment on attachment 8464157 [details] > GitHub branch URL (JS solution) > > r=me > > Please wait for a full Try run before merging :) Thanks for review! Try is green now :) Master: https://github.com/mozilla-b2g/gaia/commit/ee3cba1c44b37e81c2ec1e79c240a1522c9ca11f