media_controls: Add UI for showing a promo bubble on a control button.

media_controls: Add UI for showing a promo bubble on a control button.

The change adds the UI to be able to show a floating bubble pointing
to a media control element. This only adds the DOM for this UI, it is
not appended to the heirarchy yet.

BUG=715185

[Khushal, 2017-05-20 01:34:49]

Description was changed from

==========
[DO NOT SUBMIT]

BUG=
==========

to

==========
media_controls: Add UI for showing a promo bubble on a control button.

The change adds the UI to be able to show a floating bubble pointing
to a media control element. This only adds the DOM for this UI, it is
not appended to the heirarchy yet.

BUG=715185
==========

[Khushal, 2017-05-20 01:38:56]

Description was changed from

==========
media_controls: Add UI for showing a promo bubble on a control button.

The change adds the UI to be able to show a floating bubble pointing
to a media control element. This only adds the DOM for this UI, it is
not appended to the heirarchy yet.

BUG=715185
==========

to

==========
media_controls: Add UI for showing a promo bubble on a control button.

The change adds the UI to be able to show a floating bubble pointing
to a media control element. This only adds the DOM for this UI, it is
not appended to the heirarchy yet.

BUG=715185
==========

[Khushal, 2017-05-20 01:48:07]

khushalsagar@chromium.org changed reviewers:
+ mlamouri@chromium.org

[Khushal, 2017-05-20 01:48:08]

Does this look reasonable?

https://codereview.chromium.org/2898543002/diff/40001/third_party/WebKit/Sour...
File third_party/WebKit/Source/core/css/mediaControls.css (right):

https://codereview.chromium.org/2898543002/diff/40001/third_party/WebKit/Sour...
third_party/WebKit/Source/core/css/mediaControls.css:639: @keyframes
-internal-media-controls-promo-throbbing {
For some reason, this doesn't seem to be working. I can't find it in the
inspector either. I'm not sure but might be related to crbug.com/486195.

https://codereview.chromium.org/2898543002/diff/40001/third_party/WebKit/Sour...
File third_party/WebKit/Source/core/css/mediaControlsAndroid.css (right):

https://codereview.chromium.org/2898543002/diff/40001/third_party/WebKit/Sour...
third_party/WebKit/Source/core/css/mediaControlsAndroid.css:38: overflow:
visible;
This ends up clipping the bubble. I can have it be set to visible only if the
bubble is being shown.

[Khushal, 2017-05-22 18:19:32]

https://codereview.chromium.org/2898543002/diff/40001/third_party/WebKit/Sour...
File third_party/WebKit/Source/core/css/mediaControls.css (right):

https://codereview.chromium.org/2898543002/diff/40001/third_party/WebKit/Sour...
third_party/WebKit/Source/core/css/mediaControls.css:639: @keyframes
-internal-media-controls-promo-throbbing {
On 2017/05/20 01:48:08, Khushal wrote:
> For some reason, this doesn't seem to be working. I can't find it in the
> inspector either. I'm not sure but might be related to crbug.com/486195.

I figured what's going on with this one. Potential fix is here:
https://codereview.chromium.org/2895913002/

[Khushal, 2017-05-23 21:28:22]

khushalsagar@chromium.org changed reviewers:
+ chrishtr@chromium.org, dtrainor@chromium.org, pdr@chromium.org

[Khushal, 2017-05-23 21:28:23]

Testing this change on a few EM pages, the promo ends up being clipped with
something applying an overflow clip on the media element.

pdr@ and I talked about doing something like not showing the promo if something
in the hierarchy has an overflow clip but I'm not sure how many pages in the
markets we're targeting will have that. Is there a suggestion for dealing with
this without veto showing the UI? At this point, drawing it using an overlay in
the browser is looking like an easier approach with less cases to work around.

[kochi, 2017-05-25 05:26:39]

kochi@chromium.org changed reviewers:
+ kochi@chromium.org

[kochi, 2017-05-25 05:26:40]

https://codereview.chromium.org/2898543002/diff/80001/third_party/WebKit/Sour...
File third_party/WebKit/Source/core/css/mediaControls.css (right):

https://codereview.chromium.org/2898543002/diff/80001/third_party/WebKit/Sour...
third_party/WebKit/Source/core/css/mediaControls.css:643: }
As it's now in per-shadow <style>, this definition is
not necessary.

https://codereview.chromium.org/2898543002/diff/80001/third_party/WebKit/Sour...
third_party/WebKit/Source/core/css/mediaControls.css:655: animation:
-internal-media-controls-promo-throbbing 2s infinite;
Ditto - maybe leave non-animation lines here, and only add
animation in the per-shadow <style>? (I suppose it would work)