New media playback UI.

Source/core/html/shadow/SliderThumbElement.cpp

Index: Source/core/html/shadow/SliderThumbElement.cpp
diff --git a/Source/core/html/shadow/SliderThumbElement.cpp b/Source/core/html/shadow/SliderThumbElement.cpp
index 39043fdfaee819c22262c81b6e86d99c67c3ac6c..d5071c2917bd75bc3acf827c3caf371f5e8038b1 100644
--- a/Source/core/html/shadow/SliderThumbElement.cpp
+++ b/Source/core/html/shadow/SliderThumbElement.cpp
@@ -62,6 +62,7 @@ inline static bool hasVerticalAppearance(HTMLInputElement* input)
 inline SliderThumbElement::SliderThumbElement(Document& document)
     : HTMLDivElement(document)
     , m_inDragMode(false)
+    , m_didDragAnywhere(false)
 {
 }
 
@@ -169,6 +170,10 @@ void SliderThumbElement::setPositionFromPoint(const LayoutPoint& point)
     input->setValueFromRenderer(valueString);
     if (layoutObject())
         layoutObject()->setNeedsLayoutAndFullPaintInvalidation(LayoutInvalidationReason::SliderValueChanged);
+
+    // We actually changed the value as part of a drag.
+    if (m_inDragMode)
+        m_didDragAnywhere = true;
 }
 
 void SliderThumbElement::startDragging()
@@ -176,6 +181,7 @@ void SliderThumbElement::startDragging()
     if (LocalFrame* frame = document().frame()) {
         frame->eventHandler().setCapturingMouseEventsNode(this);
         m_inDragMode = true;
+        m_didDragAnywhere = false;
     }
 }
 
@@ -217,10 +223,19 @@ void SliderThumbElement::defaultEventHandler(Event* event)
     // MediaControlTimelineElement::defaultEventHandler() wants to handle these
     // mouse events.
     if (eventType == EventTypeNames::mousedown && isLeftButton) {
+
+        m_mouseDownLocation = mouseEvent->absoluteLocation();
         startDragging();
         return;
     } else if (eventType == EventTypeNames::mouseup && isLeftButton) {
+        if (m_inDragMode && !m_didDragAnywhere && isMediaSlider()) {

[philipj_slow, 2015/07/09 13:40:56]

I think what I would expect is that mousedown actually causes the slider to be
centered under the pointer/finger. This seems to be how the YouTube Android app
works. Should simplify the changes in this class by a lot.

Also, what are the other kinds of sliders, does this fix make sense for them too
or is the failure to budge a feature in some contexts? It seems somewhat
unlikely that the behavior is intentional and tested.

[liberato (no reviews please), 2015/07/09 22:35:35]

mousedown move: i considered that, but having the start of a drag also move the
the slider didn't feel right.  drags are easy because they're relative to the
touch down.  small movement => small adjustment.  recentering means that getting
a small adjustment also requires a precisely located touch.

other sliders: i expect that the behavior can be broadened, but i didn't want to
do it as part of this change.

[philipj_slow, 2015/07/09 23:18:37]

You're right, <input type=range> with a mouse would be weird if you couldn't
just grab the handle and drag it. However, if you try that in a Desktop browser
you'll see it's actually broken, just clicking does nothing, but as soon as you
move the mouse it centers the handle under the mouse, so you do need to click
very precisely to move it just a little.

Not sure what the "right" behavior is, maybe discuss with your UX people? Having
something different happen for <input type=range> and this slider doesn't seem
justified, I think.

[liberato (no reviews please), 2015/07/14 22:10:36]

i'll open a discussion, but i'd prefer not to connect it with this change.  the
other sliders aren't causing problems, but the media sliders are.

+            // We got a down / up with no drag in between, and we're a media
+            // slider.  Jump to the touch down.
+            setPositionFromPoint(m_mouseDownLocation);
+        }
+
         stopDragging();
+
         return;
     } else if (eventType == EventTypeNames::mousemove) {
         if (m_inDragMode)
@@ -277,11 +292,11 @@ static const AtomicString& mediaSliderThumbShadowPartId()
     return mediaSliderThumb;
 }
 
-const AtomicString& SliderThumbElement::shadowPseudoId() const
+bool SliderThumbElement::isMediaSlider() const
 {
     HTMLInputElement* input = hostInput();
     if (!input || !input->layoutObject())
-        return sliderThumbShadowPartId();
+        return false;
 
     const ComputedStyle& sliderStyle = input->layoutObject()->styleRef();
     switch (sliderStyle.appearance()) {
@@ -291,12 +306,19 @@ const AtomicString& SliderThumbElement::shadowPseudoId() const
     case MediaVolumeSliderThumbPart:
     case MediaFullScreenVolumeSliderPart:
     case MediaFullScreenVolumeSliderThumbPart:
-        return mediaSliderThumbShadowPartId();
+        return true;
     default:
-        return sliderThumbShadowPartId();
+        return false;
     }
 }
 
+const AtomicString& SliderThumbElement::shadowPseudoId() const
+{
+    if (isMediaSlider())
+        return mediaSliderThumbShadowPartId();
+    return sliderThumbShadowPartId();
+}
+
 // --------------------------------
 
 inline SliderContainerElement::SliderContainerElement(Document& document)