[Media Router WebUI] Fix search input positioning when list scrolls.

[Media Router WebUI] Fix search input positioning when list scrolls.

This change prevents the search input from overlapping the sink list when the
sink list is larger than the dialog max height and has to scroll.

BUG=609351
R=apacible@chromium.org
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Committed: https://crrev.com/b367130a6de458010536cbf4722d36bb61cd1e26
Cr-Commit-Position: refs/heads/master@{#394177}

[btolsch, 2016-05-10 17:35:38]

Description was changed from

==========
[Media Router WebUI] Fix search input positioning when list scrolls.

This change prevents the search input from overlapping the sink list when the
sink list is larger than the dialog max height and has to scroll.

BUG=609351
R=apacible@chromium.org
==========

to

==========
[Media Router WebUI] Fix search input positioning when list scrolls.

This change prevents the search input from overlapping the sink list when the
sink list is larger than the dialog max height and has to scroll.

BUG=609351
R=apacible@chromium.org
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation
==========

[btolsch, 2016-05-10 17:36:16]

Screenshots/video forthcoming, PTAL.

[btolsch, 2016-05-10 18:26:49]

Non-blocking issue:
https://screenshot.googleplex.com/Y1vfihstXic

Scrolling sink list:
https://screenshot.googleplex.com/nn76rCZyTqi

[apacible, 2016-05-16 18:33:17]

Saw the demo video last week; looks good!

https://codereview.chromium.org/1962643005/diff/20001/chrome/browser/resource...
File
chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
(right):

https://codereview.chromium.org/1962643005/diff/20001/chrome/browser/resource...
chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js:1117:
getSearchPaddingBottom_: function(usingBottomPadding) {
Set this in CSS and make the usingBottomPadding bool an attribute. That way we
can avoid setting a binary styling in JS.

https://codereview.chromium.org/1962643005/diff/20001/chrome/browser/resource...
chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js:2226:
var sinkListPadding = 0;
nit: sinkListPadding = sinkList ? this.computed... : 0;

https://codereview.chromium.org/1962643005/diff/20001/chrome/browser/resource...
chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js:2233:
firstRunFlowHeight - issueHeight - (searchHeight - searchPadding) -
nit: Remove extra ( and )

[btolsch, 2016-05-16 22:09:13]

For some reason the latest changes uncovered a bug where we are using setTimeout
and not chainOnAnimationPromise in parts of the search tests that depend on the
animation promise, so I also fixed those.

https://codereview.chromium.org/1962643005/diff/20001/chrome/browser/resource...
File
chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
(right):

https://codereview.chromium.org/1962643005/diff/20001/chrome/browser/resource...
chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js:1117:
getSearchPaddingBottom_: function(usingBottomPadding) {
On 2016/05/16 18:33:17, apacible wrote:
> Set this in CSS and make the usingBottomPadding bool an attribute. That way we
> can avoid setting a binary styling in JS.

Done.

https://codereview.chromium.org/1962643005/diff/20001/chrome/browser/resource...
chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js:2226:
var sinkListPadding = 0;
On 2016/05/16 18:33:17, apacible wrote:
> nit: sinkListPadding = sinkList ? this.computed... : 0;

Done.

https://codereview.chromium.org/1962643005/diff/20001/chrome/browser/resource...
chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js:2233:
firstRunFlowHeight - issueHeight - (searchHeight - searchPadding) -
On 2016/05/16 18:33:17, apacible wrote:
> nit: Remove extra ( and )

Done.

[apacible, 2016-05-17 01:05:34]

https://codereview.chromium.org/1962643005/diff/20001/chrome/browser/resource...
File
chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
(right):

https://codereview.chromium.org/1962643005/diff/20001/chrome/browser/resource...
chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js:1117:
getSearchPaddingBottom_: function(usingBottomPadding) {
On 2016/05/16 22:09:13, btolsch wrote:
> On 2016/05/16 18:33:17, apacible wrote:
> > Set this in CSS and make the usingBottomPadding bool an attribute. That way
we
> > can avoid setting a binary styling in JS.
> 
> Done.

I meant something like:
https://code.google.com/p/chromium/codesearch#chromium/infra/appengine/third_...

By setting that, the CSS can determine what padding to use. You should be able
to completely remove getSearchPaddingBottom_() and getSearchPaddingTop_().
Pinging you offline with a link.

[btolsch, 2016-05-17 02:43:47]

I know you linked to a CSS attribute approach but it seemed strange to
effectively make searchUseBottomPadding a public property. PS4 uses a JS binding
for changing the CSS class and PS5 uses a CSS attribute to make the padding
changes. PTAL, thanks!

https://codereview.chromium.org/1962643005/diff/20001/chrome/browser/resource...
File
chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
(right):

https://codereview.chromium.org/1962643005/diff/20001/chrome/browser/resource...
chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js:1117:
getSearchPaddingBottom_: function(usingBottomPadding) {
On 2016/05/17 01:05:34, apacible wrote:
> On 2016/05/16 22:09:13, btolsch wrote:
> > On 2016/05/16 18:33:17, apacible wrote:
> > > Set this in CSS and make the usingBottomPadding bool an attribute. That
way
> we
> > > can avoid setting a binary styling in JS.
> > 
> > Done.
> 
> I meant something like:
>
https://code.google.com/p/chromium/codesearch#chromium/infra/appengine/third_...
> 
> By setting that, the CSS can determine what padding to use. You should be able
> to completely remove getSearchPaddingBottom_() and getSearchPaddingTop_().
> Pinging you offline with a link.

Done. These functions specifically are gone, but a function (now
getElementVerticalPadding_) is still needed to get these values for animation. 
If we don't want to animate the padding, it probably won't be very noticeable,
but I'd rather keep everything as smooth as possible.

[apacible, 2016-05-17 14:29:48]

lgtm

[btolsch, 2016-05-17 17:35:04]

The CQ bit was checked by btolsch@chromium.org

[commit-bot: I haz the power, 2016-05-17 17:35:20]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/1962643005/80001
View timeline at
 https://chromium-cq-status.appspot.com/patch-timeline/1962643005/80001

[commit-bot: I haz the power, 2016-05-17 18:54:45]

Committed patchset #5 (id:80001)

[commit-bot: I haz the power, 2016-05-17 18:56:24]

Description was changed from

==========
[Media Router WebUI] Fix search input positioning when list scrolls.

This change prevents the search input from overlapping the sink list when the
sink list is larger than the dialog max height and has to scroll.

BUG=609351
R=apacible@chromium.org
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation
==========

to

==========
[Media Router WebUI] Fix search input positioning when list scrolls.

This change prevents the search input from overlapping the sink list when the
sink list is larger than the dialog max height and has to scroll.

BUG=609351
R=apacible@chromium.org
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Committed: https://crrev.com/b367130a6de458010536cbf4722d36bb61cd1e26
Cr-Commit-Position: refs/heads/master@{#394177}
==========

[commit-bot: I haz the power, 2016-05-17 18:56:25]

Patchset 5 (id:??) landed as
https://crrev.com/b367130a6de458010536cbf4722d36bb61cd1e26
Cr-Commit-Position: refs/heads/master@{#394177}