Fix <video> positioning for the MediaSource-based rendering

Fix <video> positioning for the MediaSource-based rendering

<video> must always be placed under the plugin, but it wasn't always
positioned properly. Moved video-container inside horizontally-centered div
so now video-container always occupies the same area as the <video> and the
plugin.

BUG=321825
Committed: https://src.chromium.org/viewvc/chrome?view=rev&revision=268005

[Jamie, 2014-05-02 21:01:43]

LGTM with a name change if my suggestion for simplifying doesn't pan out. If it
does, LMK if you want me to take another look.

https://codereview.chromium.org/269793002/diff/1/remoting/webapp/html/client_...
File remoting/webapp/html/client_plugin.html (right):

https://codereview.chromium.org/269793002/diff/1/remoting/webapp/html/client_...
remoting/webapp/html/client_plugin.html:7: <div
class="vertically-centered-inner">
This class name is misleading; it's actually outside the the vertically-centered
div. I would just name it 'full-width' (we already have a 'full-height' class).

https://codereview.chromium.org/269793002/diff/1/remoting/webapp/html/client_...
remoting/webapp/html/client_plugin.html:9: <div id="video-container">
Do we really need 4 containing divs to position these elements correctly? Can we
get away with just 2? I suspect that horizontal and vertical centering need
separate divs, but any other properties you want to enforce can probably be done
with additional classes on those two divs.

[kelvinp, 2014-05-02 22:08:02]

https://codereview.chromium.org/269793002/diff/1/remoting/webapp/html/client_...
File remoting/webapp/html/client_plugin.html (right):

https://codereview.chromium.org/269793002/diff/1/remoting/webapp/html/client_...
remoting/webapp/html/client_plugin.html:7: <div
class="vertically-centered-inner">
On 2014/05/02 21:01:43, Jamie wrote:
> This class name is misleading; it's actually outside the the
vertically-centered
> div. I would just name it 'full-width' (we already have a 'full-height'
class).

Yes, can we simply add 100% on vertically-centered?
Also, please make sure that you can still connect to the host when the browser
zoom level is 100% and scroll bar are present when the host has a higher
resolution than the client

[Sergey Ulanov, 2014-05-02 22:10:06]

https://codereview.chromium.org/269793002/diff/1/remoting/webapp/html/client_...
File remoting/webapp/html/client_plugin.html (right):

https://codereview.chromium.org/269793002/diff/1/remoting/webapp/html/client_...
remoting/webapp/html/client_plugin.html:7: <div
class="vertically-centered-inner">
On 2014/05/02 21:01:43, Jamie wrote:
> This class name is misleading; it's actually outside the the
vertically-centered
> div. I would just name it 'full-width' (we already have a 'full-height'
class).

Done.

https://codereview.chromium.org/269793002/diff/1/remoting/webapp/html/client_...
remoting/webapp/html/client_plugin.html:9: <div id="video-container">
On 2014/05/02 21:01:43, Jamie wrote:
> Do we really need 4 containing divs to position these elements correctly? Can
we
> get away with just 2? I suspect that horizontal and vertical centering need
> separate divs, but any other properties you want to enforce can probably be
done
> with additional classes on those two divs.

We need at least 3 divs:
 - one for vertial centering
 - one for horizontal centering
 - one to enclose <video> and the plugin

I tried removing the second one (vertically-centered-inner), but couldn't get it
to work properly.

[Sergey Ulanov, 2014-05-02 22:19:22]

https://codereview.chromium.org/269793002/diff/1/remoting/webapp/html/client_...
File remoting/webapp/html/client_plugin.html (right):

https://codereview.chromium.org/269793002/diff/1/remoting/webapp/html/client_...
remoting/webapp/html/client_plugin.html:7: <div
class="vertically-centered-inner">
On 2014/05/02 22:08:03, kelvinp wrote:
> On 2014/05/02 21:01:43, Jamie wrote:
> > This class name is misleading; it's actually outside the the
> vertically-centered
> > div. I would just name it 'full-width' (we already have a 'full-height'
> class).
> 
> Yes, can we simply add 100% on vertically-centered?

Nope, tried that. It makes it impossible to scroll to the top, when the remote
screen is taller.


> Also, please make sure that you can still connect to the host when the browser
> zoom level is 100% and scroll bar are present when the host has a higher
> resolution than the client

yes, still works.

[Sergey Ulanov, 2014-05-02 22:20:40]

The CQ bit was checked by sergeyu@chromium.org

[commit-bot: I haz the power, 2014-05-02 22:21:15]

CQ is trying da patch. Follow status at
 https://chromium-status.appspot.com/cq/sergeyu@chromium.org/269793002/20001

[commit-bot: I haz the power, 2014-05-03 02:16:32]

Change committed as 268005