DevTools: Support media event listener breakpoints in frontend.

This will allow to set breakpoint on media event listeners for video and audio elements.

R=yurys, vsevik

Review URL: https://codereview.chromium.org/343653007

git-svn-id: svn://svn.chromium.org/blink/trunk@177171 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/inspector/sources/debugger/event-listener-breakpoints-expected.txt

 Tests event listener breakpoints.
 
-
+ 
 
 Running: testClickBreakpoint
 Script execution paused.
@@ -8,7 +8,7 @@ Call stack:
     0) testElementClicked (event-listener-breakpoints.html:7)
     1) addListenerAndClick (event-listener-breakpoints.html:16)
     2)  (:1)
-Event target: Node
+Event target: INPUT
 Script execution resumed.
 
 Running: testTimerFiredBreakpoint
@@ -24,3 +24,10 @@ Call stack:
 Event target: XMLHttpRequest
 Script execution resumed.
 
+Running: testMediaEventBreakpoint
+Script execution paused.
+Call stack:
+    0) onVideoPlay (event-listener-breakpoints.html:54)
+Event target: VIDEO
+Script execution resumed.
+

third_party/WebKit/LayoutTests/inspector/sources/debugger/event-listener-breakpoints.html

@@ -44,6 +44,18 @@ function loadCallback()
     return 0;
 }
 
+function playVideo()
+{
+    var video = document.getElementById("video");
+    video.addEventListener("play", onVideoPlay, false);
+    video.play();
+}
+
+function onVideoPlay()
+{
+    return 0;
+}
+
 function test()
 {
     WebInspector.inspectorView.showPanel("sources");
@@ -103,6 +115,21 @@ function test()
             {
                 InspectorTest.evaluateInPage("addLoadListeners()", next);
             }
+        },
+
+        function testMediaEventBreakpoint(next)
+        {
+            pane._setBreakpoint("listener:play", ["audio", "video"]);
+            InspectorTest.waitUntilPaused(paused);
+            InspectorTest.evaluateInPageWithTimeout("playVideo()");
+
+            function paused(callFrames, reason, breakpointIds, asyncStackTrace, auxData)
+            {
+                InspectorTest.captureStackTrace(callFrames);
+                printEventTargetName(auxData);
+                pane._removeBreakpoint("listener:play", ["audio", "video"]);
+                InspectorTest.resumeExecution(next);
+            }
         }
     ]);
 
@@ -125,6 +152,7 @@ Tests event listener breakpoints.
 </p>
 
 <input type=button id="test"></input>
+<video id="video" src="../../../media/content/test.ogv"></video>
 
 </body>
 </html>

third_party/WebKit/Source/core/inspector/InspectorDOMDebuggerAgent.cpp

@@ -418,7 +418,7 @@ void InspectorDOMDebuggerAgent::pauseOnNativeEventIfNeeded(PassRefPtr<JSONObject
         m_debuggerAgent->schedulePauseOnNextStatement(InspectorFrontend::Debugger::Reason::EventListener, eventData);
 }
 
-PassRefPtr<JSONObject> InspectorDOMDebuggerAgent::preparePauseOnNativeEventData(const String& eventName, const AtomicString* targetName)
+PassRefPtr<JSONObject> InspectorDOMDebuggerAgent::preparePauseOnNativeEventData(const String& eventName, const String* targetName)
 {
     String fullEventName = (targetName ? listenerEventCategoryType : instrumentationEventCategoryType) + eventName;
     if (m_pauseInNextEventListener) {
@@ -476,7 +476,9 @@ void InspectorDOMDebuggerAgent::willFireAnimationFrame(Document*, int)
 
 void InspectorDOMDebuggerAgent::willHandleEvent(EventTarget* target, Event* event, EventListener*, bool)
 {
-    pauseOnNativeEventIfNeeded(preparePauseOnNativeEventData(event->type(), &target->interfaceName()), false);
+    Node* node = target->toNode();
+    String targetName = node ? node->nodeName() : target->interfaceName();
+    pauseOnNativeEventIfNeeded(preparePauseOnNativeEventData(event->type(), &targetName), false);
 }
 
 void InspectorDOMDebuggerAgent::willExecuteCustomElementCallback(Element*)

third_party/WebKit/Source/core/inspector/InspectorDOMDebuggerAgent.h

@@ -105,7 +105,7 @@ private:
     InspectorDOMDebuggerAgent(InspectorDOMAgent*, InspectorDebuggerAgent*);
 
     void pauseOnNativeEventIfNeeded(PassRefPtr<JSONObject> eventData, bool synchronous);
-    PassRefPtr<JSONObject> preparePauseOnNativeEventData(const String& eventName, const AtomicString* targetName);
+    PassRefPtr<JSONObject> preparePauseOnNativeEventData(const String& eventName, const String* targetName);
 
     // InspectorDOMAgent::Listener implementation.
     virtual void domAgentWasEnabled() OVERRIDE;

third_party/WebKit/Source/devtools/front_end/sources/BreakpointsSidebarPane.js

@@ -535,6 +535,7 @@ WebInspector.EventListenerBreakpointsSidebarPane = function()
     this._createCategory(WebInspector.UIString("Drag / drop"), ["dragenter", "dragover", "dragleave", "drop"]);
     this._createCategory(WebInspector.UIString("Keyboard"), ["keydown", "keyup", "keypress", "input"]);
     this._createCategory(WebInspector.UIString("Load"), ["load", "beforeunload", "unload", "abort", "error", "hashchange", "popstate"]);
+    this._createCategory(WebInspector.UIString("Media"), ["play", "pause", "playing", "canplay", "canplaythrough", "seeking", "seeked", "timeupdate", "ended", "ratechange", "durationchange", "volumechange", "loadstart", "progress", "suspend", "abort", "error", "emptied", "stalled", "loadedmetadata", "loadeddata", "waiting"], false, ["audio", "video"]);
     this._createCategory(WebInspector.UIString("Mouse"), ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mousemove", "mouseout", "mousewheel", "wheel"]);
     this._createCategory(WebInspector.UIString("Timer"), ["setTimer", "clearTimer", "timerFired"], true);
     this._createCategory(WebInspector.UIString("Touch"), ["touchstart", "touchmove", "touchend", "touchcancel"]);