New media playback UI.

Source/core/html/shadow/MediaControlElements.cpp

 /*
  * Copyright (C) 2008, 2009, 2010, 2011 Apple Inc. All rights reserved.
  * Copyright (C) 2012 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 55 matching lines @@
 
 // Sliders (the volume control and timeline) need to capture some additional events used when dragging the thumb.
 static bool isUserInteractionEventForSlider(Event* event)
 {
     const AtomicString& type = event->type();
     return type == EventTypeNames::mousedown
         || type == EventTypeNames::mouseup
         || type == EventTypeNames::click
         || type == EventTypeNames::dblclick
         || type == EventTypeNames::mouseover
         || type == EventTypeNames::mouseout

[liberato (no reviews please), 2015/07/27 20:26:08]

this is the cause of the "takes a while to hide the panel after mouseout" bug
that you mentioned.  it only happens if one triggers a mouseout over one of the
two sliders.  it wasn't as visible in the old UI since there was a small gap
between the bottom of the panel and the bottom of the media element, which
usually triggered another mouseout.

i modified this check to include mouse{over,out,move} only if the scroller is in
drag mode.

however, i didn't see any difference in behavior if one simply never checks for
them.  when the slider captures the event, the mouseouts get eaten somewhere
anyway.

[philipj_slow, 2015/07/28 15:23:48]

That makes sense. I made a demo for myself to see how this works:
http://software.hixie.ch/utilities/js/live-dom-viewer/saved/3574

(Add the gap class to the inner div to see the old behavior.)

From this, I gather that the mouseover and mouseout logic in
MediaControls::defaultEventHandler could actually just use mouseenter and
mouseleave and be simplified somewhat as a consequence. (In this CL only if it's
a cleaner fix.)

Like you, I can't actually see that these checks are needed, while one is
dragging a slider it doesn't seem like any of the events are fired anyway. The
origin of this is https://codereview.chromium.org/406213002 but it's possible
that more than necessary was done to fix the "the click event isn't being
blocked on the time and volume sliders" problem.

Could try what happens if one simply replaces isUserInteractionEventForSlider()
with isUserInteractionEvent()? It's a rare thing when things can be fixed by
just removing code, but perhaps this is such an occasion.

[philipj_slow, 2015/08/03 13:52:34]

Were you able to figure out if the change is needed?

[liberato (no reviews please), 2015/08/04 15:07:00]

i'm unable to convince myself.  rather than breaking something. i opened
crbug.com/516416 and assigned it to me.

         || type == EventTypeNames::mousemove
         || event->isKeyboardEvent()
         || event->isTouchEvent();
 }
 
 
 MediaControlPanelElement::MediaControlPanelElement(MediaControls& mediaControls)
     : MediaControlDivElement(mediaControls, MediaControlsPanel)
     , m_isDisplayed(false)
     , m_opaque(true)
@@ skipping 32 matching lines @@
 
 void MediaControlPanelElement::stopTimer()
 {
     if (m_transitionTimer.isActive())
         m_transitionTimer.stop();
 }
 
 void MediaControlPanelElement::transitionTimerFired(Timer<MediaControlPanelElement>*)
 {
     if (!m_opaque)
-        hide();
+        setIsWanted(false);
 
     stopTimer();
 }
 
 void MediaControlPanelElement::didBecomeVisible()
 {
     ASSERT(m_isDisplayed && m_opaque);
     mediaElement().mediaControlsDidBecomeVisible();
 }
 
 void MediaControlPanelElement::makeOpaque()
 {
     if (m_opaque)
         return;
 
     setInlineStyleProperty(CSSPropertyOpacity, 1.0, CSSPrimitiveValue::CSS_NUMBER);
     m_opaque = true;
 
     if (m_isDisplayed) {
-        show();
+        setIsWanted(true);
         didBecomeVisible();
     }
 }
 
 void MediaControlPanelElement::makeTransparent()
 {
     if (!m_opaque)
         return;
 
     setInlineStyleProperty(CSSPropertyOpacity, 0.0, CSSPrimitiveValue::CSS_NUMBER);
@@ skipping 141 matching lines @@
 {
     if (event->type() == EventTypeNames::click && mediaElement().togglePlayStateWillPlay()) {
         mediaElement().togglePlayState();
         updateDisplayType();
         event->setDefaultHandled();
     }
 }
 
 void MediaControlOverlayPlayButtonElement::updateDisplayType()
 {
-    if (mediaElement().shouldShowControls() && mediaElement().togglePlayStateWillPlay())
-        show();
-    else
-        hide();
+    setIsWanted(mediaElement().shouldShowControls() && mediaElement().togglePlayStateWillPlay());
 }
 
 bool MediaControlOverlayPlayButtonElement::keepEventInNode(Event* event)
 {
     return isUserInteractionEvent(event);
 }
 
 
 // ----------------------------
 
 MediaControlToggleClosedCaptionsButtonElement::MediaControlToggleClosedCaptionsButtonElement(MediaControls& mediaControls)
     : MediaControlInputElement(mediaControls, MediaShowClosedCaptionsButton)
 {
 }
 
 PassRefPtrWillBeRawPtr<MediaControlToggleClosedCaptionsButtonElement> MediaControlToggleClosedCaptionsButtonElement::create(MediaControls& mediaControls)
 {
     RefPtrWillBeRawPtr<MediaControlToggleClosedCaptionsButtonElement> button = adoptRefWillBeNoop(new MediaControlToggleClosedCaptionsButtonElement(mediaControls));
     button->ensureUserAgentShadowRoot();
     button->setType(InputTypeNames::button);
     button->setShadowPseudoId(AtomicString("-webkit-media-controls-toggle-closed-captions-button", AtomicString::ConstructFromLiteral));
-    button->hide();
+    button->setIsWanted(false);
     return button.release();
 }
 
 void MediaControlToggleClosedCaptionsButtonElement::updateDisplayType()
 {
     bool captionsVisible = mediaElement().closedCaptionsVisible();
     setDisplayType(captionsVisible ? MediaHideClosedCaptionsButton : MediaShowClosedCaptionsButton);
     setChecked(captionsVisible);
 }
 
@@ skipping 157 matching lines @@
     : MediaControlInputElement(mediaControls, MediaEnterFullscreenButton)
 {
 }
 
 PassRefPtrWillBeRawPtr<MediaControlFullscreenButtonElement> MediaControlFullscreenButtonElement::create(MediaControls& mediaControls)
 {
     RefPtrWillBeRawPtr<MediaControlFullscreenButtonElement> button = adoptRefWillBeNoop(new MediaControlFullscreenButtonElement(mediaControls));
     button->ensureUserAgentShadowRoot();
     button->setType(InputTypeNames::button);
     button->setShadowPseudoId(AtomicString("-webkit-media-controls-fullscreen-button", AtomicString::ConstructFromLiteral));
-    button->hide();
+    button->setIsWanted(false);
     return button.release();
 }
 
 void MediaControlFullscreenButtonElement::defaultEventHandler(Event* event)
 {
     if (event->type() == EventTypeNames::click) {
         if (mediaElement().isFullscreen())
             mediaElement().exitFullscreen();
         else
             mediaElement().enterFullscreen();
@@ skipping 86 matching lines @@
 }
 
 PassRefPtrWillBeRawPtr<MediaControlCurrentTimeDisplayElement> MediaControlCurrentTimeDisplayElement::create(MediaControls& mediaControls)
 {
     RefPtrWillBeRawPtr<MediaControlCurrentTimeDisplayElement> element = adoptRefWillBeNoop(new MediaControlCurrentTimeDisplayElement(mediaControls));
     element->setShadowPseudoId(AtomicString("-webkit-media-controls-current-time-display", AtomicString::ConstructFromLiteral));
     return element.release();
 }
 
 } // namespace blink