New media playback UI.

Source/core/html/shadow/SliderThumbElement.cpp

 /*
  * Copyright (C) 2006, 2007, 2008, 2009 Apple Inc. All rights reserved.
  * Copyright (C) 2010 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:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 44 matching lines @@
 {
     ASSERT(input->layoutObject());
     const ComputedStyle& sliderStyle = input->layoutObject()->styleRef();
 
     return sliderStyle.appearance() == SliderVerticalPart;
 }
 
 inline SliderThumbElement::SliderThumbElement(Document& document)
     : HTMLDivElement(document)
     , m_inDragMode(false)
+    , m_didDragAnywhere(false)
 {
 }
 
 PassRefPtrWillBeRawPtr<SliderThumbElement> SliderThumbElement::create(Document& document)
 {
     RefPtrWillBeRawPtr<SliderThumbElement> element = adoptRefWillBeNoop(new SliderThumbElement(document));
     element->setAttribute(idAttr, ShadowElementNames::sliderThumb());
     return element.release();
 }
 
@@ skipping 87 matching lines @@
     }
 
     String valueString = serializeForNumberType(value);
     if (valueString == input->value())
         return;
 
     // FIXME: This is no longer being set from renderer. Consider updating the method name.
     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()
 {
     if (LocalFrame* frame = document().frame()) {
         frame->eventHandler().setCapturingMouseEventsNode(this);
         m_inDragMode = true;
+        m_didDragAnywhere = false;
     }
 }
 
 void SliderThumbElement::stopDragging()
 {
     if (!m_inDragMode)
         return;
 
     if (LocalFrame* frame = document().frame())
         frame->eventHandler().setCapturingMouseEventsNode(nullptr);
@@ skipping 21 matching lines @@
     }
 
     MouseEvent* mouseEvent = toMouseEvent(event);
     bool isLeftButton = mouseEvent->button() == LeftButton;
     const AtomicString& eventType = event->type();
 
     // We intentionally do not call event->setDefaultHandled() here because
     // 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)
             setPositionFromPoint(mouseEvent->absoluteLocation());
         return;
     }
 
     HTMLDivElement::defaultEventHandler(event);
 }
 
@@ skipping 36 matching lines @@
     DEFINE_STATIC_LOCAL(const AtomicString, sliderThumb, ("-webkit-slider-thumb", AtomicString::ConstructFromLiteral));
     return sliderThumb;
 }
 
 static const AtomicString& mediaSliderThumbShadowPartId()
 {
     DEFINE_STATIC_LOCAL(const AtomicString, mediaSliderThumb, ("-webkit-media-slider-thumb", AtomicString::ConstructFromLiteral));
     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()) {
     case MediaSliderPart:
     case MediaSliderThumbPart:
     case MediaVolumeSliderPart:
     case MediaVolumeSliderThumbPart:
     case MediaFullScreenVolumeSliderPart:
     case MediaFullScreenVolumeSliderThumbPart:
+        return true;
+    default:
+        return false;
+    }
+}
+
+const AtomicString& SliderThumbElement::shadowPseudoId() const
+{
+    if (isMediaSlider())
         return mediaSliderThumbShadowPartId();
-    default:
-        return sliderThumbShadowPartId();
-    }
+    return sliderThumbShadowPartId();
 }
 
 // --------------------------------
 
 inline SliderContainerElement::SliderContainerElement(Document& document)
     : HTMLDivElement(document)
 {
 }
 
 DEFINE_NODE_FACTORY(SliderContainerElement)
@@ skipping 19 matching lines @@
     case MediaVolumeSliderThumbPart:
     case MediaFullScreenVolumeSliderPart:
     case MediaFullScreenVolumeSliderThumbPart:
         return mediaSliderContainer;
     default:
         return sliderContainer;
     }
 }
 
 }