<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[213626] trunk</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/213626">213626</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2017-03-08 20:55:56 -0800 (Wed, 08 Mar 2017)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: Add DOM breakpoints UI for node/subtree modification events
https://bugs.webkit.org/show_bug.cgi?id=168101

Reviewed by Joseph Pecoraro.

Source/WebCore:

Test: inspector/dom-debugger/dom-breakpoints.html

* inspector/InspectorDOMAgent.h:
Removed declarations for undefined member functions.

* inspector/InspectorDOMDebuggerAgent.cpp:
(WebCore::InspectorDOMDebuggerAgent::disable):
(WebCore::InspectorDOMDebuggerAgent::mainFrameDOMContentLoaded):
(WebCore::InspectorDOMDebuggerAgent::willInsertDOMNode):
(WebCore::InspectorDOMDebuggerAgent::willRemoveDOMNode):
(WebCore::InspectorDOMDebuggerAgent::willModifyDOMAttr):
Check that DebuggerAgent breakpoints are active before breaking.
(WebCore::InspectorDOMDebuggerAgent::clear): Deleted.
Replaced by call to discardBindings.
* inspector/InspectorDOMDebuggerAgent.h:

* inspector/InspectorInstrumentation.cpp:
(WebCore::InspectorInstrumentation::domContentLoadedEventFiredImpl):
DOMDebugger agent needs to discard bindings when the main frame navigates.

Source/WebInspectorUI:

* Localizations/en.lproj/localizedStrings.js:
New UI strings.

* UserInterface/Base/Main.js:
(WebInspector.loaded):
Add new manager.

* UserInterface/Controllers/DOMBreakpointTreeController.js: Added.
Handles messages from DOMDebuggerManager, and updates an associated
tree outline as DOM breakpoints are added and removed.
(WebInspector.DOMBreakpointTreeController):
(WebInspector.DOMBreakpointTreeController.appendBreakpointContextMenuItems):
(WebInspector.DOMBreakpointTreeController.prototype.disconnect):
(WebInspector.DOMBreakpointTreeController.prototype._addBreakpointTreeElement):
(WebInspector.DOMBreakpointTreeController.prototype._removeBreakpointTreeElement):
(WebInspector.DOMBreakpointTreeController.prototype._domBreakpointAdded):
(WebInspector.DOMBreakpointTreeController.prototype._domBreakpointRemoved):
(WebInspector.DOMBreakpointTreeController.prototype._domBreakpointResolvedStateDidChange):
(WebInspector.DOMBreakpointTreeController.prototype._mainResourceDidChange):

* UserInterface/Controllers/DOMDebuggerManager.js: Added.
New frontend manager for the DOMDebugger domain. A DOM breakpoint is
described by a location (URL and node path) and type. The manager keeps
all known DOM breakpoints in memory, and considers a breakpoint to be
&quot;resolved&quot; once its location is pushed to the frontend.

Breakpoints located within a child frame are still associated with the
main frame. Whenever a the main resource of a child frame changes, all
unresolved breakpoints associated with the main frame are speculatively
resolved.

(WebInspector.DOMDebuggerManager):
(WebInspector.DOMDebuggerManager.prototype.get supported):
(WebInspector.DOMDebuggerManager.prototype.get domBreakpoints):
(WebInspector.DOMDebuggerManager.prototype.domBreakpointsForNode):
(WebInspector.DOMDebuggerManager.prototype.addDOMBreakpoint):
(WebInspector.DOMDebuggerManager.prototype.removeDOMBreakpoint):
(WebInspector.DOMDebuggerManager.prototype._detachDOMBreakpoint):
(WebInspector.DOMDebuggerManager.prototype._detachBreakpointsForFrame):
(WebInspector.DOMDebuggerManager.prototype._speculativelyResolveBreakpoints):
(WebInspector.DOMDebuggerManager.prototype._resolveDOMBreakpoint):
(WebInspector.DOMDebuggerManager.prototype._updateDOMBreakpoint):
(WebInspector.DOMDebuggerManager.prototype._saveBreakpoints):
(WebInspector.DOMDebuggerManager.prototype._domBreakpointDisabledStateDidChange):
(WebInspector.DOMDebuggerManager.prototype._childFrameWasRemoved):
(WebInspector.DOMDebuggerManager.prototype._mainFrameDidChange):
(WebInspector.DOMDebuggerManager.prototype._mainResourceDidChange):
(WebInspector.DOMDebuggerManager.prototype._nodeInserted):
(WebInspector.DOMDebuggerManager.prototype._nodeRemoved):

* UserInterface/Controllers/DebuggerManager.js:
(WebInspector.DebuggerManager.prototype._pauseReasonFromPayload):
Plumbing for DOM breakpoint pause reason.

* UserInterface/Images/DOMBreakpoint.svg: Added.
New art. Visually very similar to a script breakpoint, with some
tweaks to make it suitable for display in the DOM tree gutter.

* UserInterface/Main.html:
New files.

* UserInterface/Models/DOMBreakpoint.js: Added.
New model class. DOM breakpoints are either associated with a DOM node
when created, or constructed from a cookie and resolved in the future.

(WebInspector.DOMBreakpoint):
(WebInspector.DOMBreakpoint.prototype.get type):
(WebInspector.DOMBreakpoint.prototype.get url):
(WebInspector.DOMBreakpoint.prototype.get path):
(WebInspector.DOMBreakpoint.prototype.get disabled):
(WebInspector.DOMBreakpoint.prototype.set disabled):
(WebInspector.DOMBreakpoint.prototype.get domNodeIdentifier):
(WebInspector.DOMBreakpoint.prototype.set domNodeIdentifier):
(WebInspector.DOMBreakpoint.prototype.get serializableInfo):
(WebInspector.DOMBreakpoint.prototype.saveIdentityToCookie):

* UserInterface/Protocol/Legacy/10.0/InspectorBackendCommands.js:
* UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js:
* UserInterface/Protocol/Legacy/7.0/InspectorBackendCommands.js:
* UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js:
* UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js:
* UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js:
The DOMDebugger should not be enabled for legacy backends, since legacy
backend support was never tested and may have issues.

* UserInterface/Test.html:
New files.

* UserInterface/Test/Test.js:
(WebInspector.loaded):
Add new manager.

* UserInterface/Views/ContentView.js:
(WebInspector.ContentView.createFromRepresentedObject):
(WebInspector.ContentView.resolvedRepresentedObjectForRepresentedObject):
Plumbing for additional represented object types. DOMNode is included
because the Debugger sidebar panel shows DOM breakpoint tree elements
as children of a DOM node tree element.

* UserInterface/Views/DOMBreakpointTreeElement.css: Added.
(.item.dom-breakpoint .icon):
(.item.dom-breakpoint.breakpoint-paused-icon .icon):
(.item.dom-breakpoint .status img):
(.item.dom-breakpoint .status &gt; img.disabled):
Styles for &quot;Pause Reason&quot; and &quot;DOM Breakpoints&quot; sections.

* UserInterface/Views/DOMBreakpointTreeElement.js: Added.
Tree element class for DOM breakpoints. Includes a breakpoint status
element and context menu for delete/disable actions, similar to script
breakpoint tree elements.

(WebInspector.DOMBreakpointTreeElement):
(WebInspector.DOMBreakpointTreeElement.displayNameForType):
(WebInspector.DOMBreakpointTreeElement.prototype.onattach):
(WebInspector.DOMBreakpointTreeElement.prototype.ondetach):
(WebInspector.DOMBreakpointTreeElement.prototype.ondelete):
(WebInspector.DOMBreakpointTreeElement.prototype.onenter):
(WebInspector.DOMBreakpointTreeElement.prototype.onspace):
(WebInspector.DOMBreakpointTreeElement.prototype.populateContextMenu):
(WebInspector.DOMBreakpointTreeElement.prototype._statusImageElementClicked):
(WebInspector.DOMBreakpointTreeElement.prototype._statusImageElementFocused):
(WebInspector.DOMBreakpointTreeElement.prototype._statusImageElementMouseDown):
(WebInspector.DOMBreakpointTreeElement.prototype._toggleBreakpoint):
(WebInspector.DOMBreakpointTreeElement.prototype._updateStatus):

* UserInterface/Views/DOMNodeTreeElement.js: Added.
Tree element class for DOM nodes, which serves as a parent for DOM
breakpoint tree elements. Includes context menu for bulk delete/disable
of all child breakpoints.

(WebInspector.DOMNodeTreeElement):
(WebInspector.DOMNodeTreeElement.prototype.ondelete):
(WebInspector.DOMNodeTreeElement.prototype.populateContextMenu):

* UserInterface/Views/DOMTreeContentView.css:
Styles for DOM breakpoint gutter and breakpoint indicators, including
&quot;left pointing&quot; breakpoints for RTL mode.

(.content-view.dom-tree.show-gutter .tree-outline.dom):
(body[dir=ltr] .content-view.dom-tree.show-gutter .tree-outline.dom):
(body[dir=rtl] .content-view.dom-tree.show-gutter .tree-outline.dom):
(.content-view.dom-tree .tree-outline.dom li .status-image):
(body[dir=ltr] .content-view.dom-tree .tree-outline.dom li .status-image):
(body[dir=rtl] .content-view.dom-tree .tree-outline.dom li .status-image):
(.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint):
(body:not(.window-inactive) .content-view.dom-tree .tree-outline.dom:focus li.selected .status-image.breakpoint):
(.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.disabled):
(.content-view.dom-tree .tree-outline.dom.breakpoints-disabled li .status-image.breakpoint):
(.content-view.dom-tree .tree-outline.dom.breakpoints-disabled li .status-image.breakpoint.disabled):

* UserInterface/Views/DOMTreeContentView.js:
Add support for DOM breakpoint gutter and breakpoint indicators.
Breakpoint indicator elements are part of the DOM tree element, and are
updated whenever there a breakpoint's disabled or resolved state changes.

(WebInspector.DOMTreeContentView):
(WebInspector.DOMTreeContentView.prototype.get breakpointGutterEnabled):
(WebInspector.DOMTreeContentView.prototype.set breakpointGutterEnabled):
(WebInspector.DOMTreeContentView.prototype.shown):
(WebInspector.DOMTreeContentView.prototype.closed):
(WebInspector.DOMTreeContentView.prototype._domTreeElementAdded):
(WebInspector.DOMTreeContentView.prototype._domBreakpointAddedOrRemoved):
(WebInspector.DOMTreeContentView.prototype._domBreakpointDisabledStateDidChange):
(WebInspector.DOMTreeContentView.prototype._domBreakpointResolvedStateDidChange):
(WebInspector.DOMTreeContentView.prototype._updateBreakpointStatus):
(WebInspector.DOMTreeContentView.prototype._restoreBreakpointsAfterUpdate):
(WebInspector.DOMTreeContentView.prototype._breakpointsEnabledDidChange):

* UserInterface/Views/DOMTreeElement.js:
Add support for breakpoint status element and content menu.
(WebInspector.DOMTreeElement):
(WebInspector.DOMTreeElement.prototype.get breakpointStatus):
(WebInspector.DOMTreeElement.prototype.set breakpointStatus):
(WebInspector.DOMTreeElement.prototype._populateNodeContextMenu):
(WebInspector.DOMTreeElement.prototype.updateTitle):
(WebInspector.DOMTreeElement.prototype._updateBreakpointStatus):
(WebInspector.DOMTreeElement.prototype._statusImageContextmenu):

* UserInterface/Views/DebuggerSidebarPanel.css:
(.sidebar &gt; .panel.navigation.debugger .details-section.dom-breakpoints .item.dom-node .titles):
(.sidebar &gt; .panel.navigation.debugger .details-section.dom-breakpoints .item.dom-node .icon):
Styles for DOM node tree elements.

* UserInterface/Views/DebuggerSidebarPanel.js:
Add new DOM Breakpoints section, and support for the &quot;DOM&quot; pause reason.

(WebInspector.DebuggerSidebarPanel):
(WebInspector.DebuggerSidebarPanel.prototype.closed):
(WebInspector.DebuggerSidebarPanel.prototype._updatePauseReasonSection):
(WebInspector.DebuggerSidebarPanel.prototype._domBreakpointAddedOrRemoved):

* UserInterface/Views/FrameDOMTreeContentView.js:
(WebInspector.FrameDOMTreeContentView.prototype._rootDOMNodeAvailable):
Restore DOM breakpoints once the root node is available.

* UserInterface/Views/Variables.css:
(:root):
Fill and stroke colors for resolved, unresolved, and disabled breakpoints.

* Versions/Inspector-iOS-10.0.json:
* Versions/Inspector-iOS-10.3.json:
* Versions/Inspector-iOS-7.0.json:
* Versions/Inspector-iOS-8.0.json:
* Versions/Inspector-iOS-9.0.json:
* Versions/Inspector-iOS-9.3.json:

LayoutTests:

Tests for pausing on supported DOM breakpoint types, and DOMDebuggerManager
events triggered by added/removed DOM nodes that have breakpoints.

* inspector/dom-debugger/dom-breakpoints-expected.txt: Added.
* inspector/dom-debugger/dom-breakpoints.html: Added.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreinspectorInspectorDOMAgenth">trunk/Source/WebCore/inspector/InspectorDOMAgent.h</a></li>
<li><a href="#trunkSourceWebCoreinspectorInspectorDOMDebuggerAgentcpp">trunk/Source/WebCore/inspector/InspectorDOMDebuggerAgent.cpp</a></li>
<li><a href="#trunkSourceWebCoreinspectorInspectorDOMDebuggerAgenth">trunk/Source/WebCore/inspector/InspectorDOMDebuggerAgent.h</a></li>
<li><a href="#trunkSourceWebCoreinspectorInspectorInstrumentationcpp">trunk/Source/WebCore/inspector/InspectorInstrumentation.cpp</a></li>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBaseMainjs">trunk/Source/WebInspectorUI/UserInterface/Base/Main.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceControllersDebuggerManagerjs">trunk/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceProtocolLegacy100InspectorBackendCommandsjs">trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.0/InspectorBackendCommands.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceProtocolLegacy103InspectorBackendCommandsjs">trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceProtocolLegacy70InspectorBackendCommandsjs">trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/7.0/InspectorBackendCommands.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceProtocolLegacy80InspectorBackendCommandsjs">trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceProtocolLegacy90InspectorBackendCommandsjs">trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceProtocolLegacy93InspectorBackendCommandsjs">trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTestTestjs">trunk/Source/WebInspectorUI/UserInterface/Test/Test.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTesthtml">trunk/Source/WebInspectorUI/UserInterface/Test.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDebuggerSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDebuggerSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFrameDOMTreeContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/FrameDOMTreeContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVariablescss">trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css</a></li>
<li><a href="#trunkSourceWebInspectorUIVersionsInspectoriOS100json">trunk/Source/WebInspectorUI/Versions/Inspector-iOS-10.0.json</a></li>
<li><a href="#trunkSourceWebInspectorUIVersionsInspectoriOS103json">trunk/Source/WebInspectorUI/Versions/Inspector-iOS-10.3.json</a></li>
<li><a href="#trunkSourceWebInspectorUIVersionsInspectoriOS70json">trunk/Source/WebInspectorUI/Versions/Inspector-iOS-7.0.json</a></li>
<li><a href="#trunkSourceWebInspectorUIVersionsInspectoriOS80json">trunk/Source/WebInspectorUI/Versions/Inspector-iOS-8.0.json</a></li>
<li><a href="#trunkSourceWebInspectorUIVersionsInspectoriOS90json">trunk/Source/WebInspectorUI/Versions/Inspector-iOS-9.0.json</a></li>
<li><a href="#trunkSourceWebInspectorUIVersionsInspectoriOS93json">trunk/Source/WebInspectorUI/Versions/Inspector-iOS-9.3.json</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsinspectordomdebuggerdombreakpointsexpectedtxt">trunk/LayoutTests/inspector/dom-debugger/dom-breakpoints-expected.txt</a></li>
<li><a href="#trunkLayoutTestsinspectordomdebuggerdombreakpointshtml">trunk/LayoutTests/inspector/dom-debugger/dom-breakpoints.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceControllersDOMBreakpointTreeControllerjs">trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMBreakpointTreeController.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceControllersDOMDebuggerManagerjs">trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMDebuggerManager.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesDOMBreakpointsvg">trunk/Source/WebInspectorUI/UserInterface/Images/DOMBreakpoint.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsDOMBreakpointjs">trunk/Source/WebInspectorUI/UserInterface/Models/DOMBreakpoint.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMBreakpointTreeElementcss">trunk/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMBreakpointTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMNodeTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeTreeElement.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/LayoutTests/ChangeLog        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2017-03-08  Matt Baker  &lt;mattbaker@apple.com&gt;
+
+        Web Inspector: Add DOM breakpoints UI for node/subtree modification events
+        https://bugs.webkit.org/show_bug.cgi?id=168101
+
+        Reviewed by Joseph Pecoraro.
+
+        Tests for pausing on supported DOM breakpoint types, and DOMDebuggerManager
+        events triggered by added/removed DOM nodes that have breakpoints.
+
+        * inspector/dom-debugger/dom-breakpoints-expected.txt: Added.
+        * inspector/dom-debugger/dom-breakpoints.html: Added.
+
</ins><span class="cx"> 2017-03-08  Jiewen Tan  &lt;jiewen_tan@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         [WebCrypto] Implement ECDH DeriveBits operation
</span></span></pre></div>
<a id="trunkLayoutTestsinspectordomdebuggerdombreakpointsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/inspector/dom-debugger/dom-breakpoints-expected.txt (0 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/dom-debugger/dom-breakpoints-expected.txt                                (rev 0)
+++ trunk/LayoutTests/inspector/dom-debugger/dom-breakpoints-expected.txt        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -0,0 +1,81 @@
</span><ins>+Tests for DOM breakpoints.
+
+
+== Running test suite: DOMBreakpoints
+-- Running test case: BasicBreakpoint
+PASS: Breakpoint added.
+PASS: Breakpoint should not be disabled.
+PASS: Breakpoint should have node identifier.
+PASS: Breakpoint URL should match document URL.
+-- Running test teardown.
+
+-- Running test case: BreakOnSubtreeModified
+PASS: Breakpoint added.
+PASS: Breakpoint should have expected type.
+Call DOM operation.
+PAUSED:
+PASS: Pause reason should be DOM.
+CALL STACK:
+0: [F] subtreeModifiedTest
+1: [P] Global Code
+-- Running test teardown.
+
+-- Running test case: BreakOnAttributeModified
+PASS: Breakpoint added.
+PASS: Breakpoint should have expected type.
+Call DOM operation.
+PAUSED:
+PASS: Pause reason should be DOM.
+CALL STACK:
+0: [F] attributeModifiedTest
+1: [P] Global Code
+-- Running test teardown.
+
+-- Running test case: BreakOnNodeRemoved
+PASS: Breakpoint added.
+PASS: Breakpoint should have expected type.
+Call DOM operation.
+PAUSED:
+PASS: Pause reason should be DOM.
+CALL STACK:
+0: [F] nodeRemovedTest
+1: [P] Global Code
+-- Running test teardown.
+
+-- Running test case: ShouldNotPauseOnDisabledBreakpoint
+PASS: Breakpoint added.
+Wait for evaluate in page to return.
+PASS: Should not pause for disabled breakpoint.
+-- Running test teardown.
+
+-- Running test case: RemoveBreakpoint
+PASS: Breakpoint added.
+Remove breakpoint.
+Wait for evaluate in page to return.
+PASS: Should not pause for removed breakpoint.
+-- Running test teardown.
+
+-- Running test case: SetBreakpointWithInvalidNodeId
+Attempting to set breakpoint.
+Protocol result: Could not find node with given id
+PASS: Protocol should return an error.
+-- Running test teardown.
+
+-- Running test case: SetBreakpointWithInvalidType
+Attempting to set breakpoint.
+Protocol result: Unknown DOM breakpoint type: custom-breakpoint-type
+PASS: Protocol should return an error.
+-- Running test teardown.
+
+-- Running test case: RemoveBreakpointWithInvalidNodeId
+Attempting to remove breakpoint.
+Protocol result: Could not find node with given id
+PASS: Protocol should return an error.
+-- Running test teardown.
+
+-- Running test case: RemoveBreakpointWithInvalidType
+Attempting to remove breakpoint.
+Protocol result: Unknown DOM breakpoint type: custom-breakpoint-type
+PASS: Protocol should return an error.
+-- Running test teardown.
+
</ins></span></pre></div>
<a id="trunkLayoutTestsinspectordomdebuggerdombreakpointshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/inspector/dom-debugger/dom-breakpoints.html (0 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/dom-debugger/dom-breakpoints.html                                (rev 0)
+++ trunk/LayoutTests/inspector/dom-debugger/dom-breakpoints.html        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -0,0 +1,290 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script src=&quot;../../http/tests/inspector/resources/inspector-test.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../debugger/resources/log-active-stack-trace.js&quot;&gt;&lt;/script&gt;
+&lt;script&gt;
+function subtreeModifiedTest() {
+    document.getElementById(&quot;subtree-modified-test&quot;).append(document.createElement(&quot;p&quot;));
+}
+
+function attributeModifiedTest() {
+    document.getElementById(&quot;attribute-modified-test&quot;).setAttribute(&quot;display&quot;, &quot;none&quot;);
+}
+
+function nodeRemovedTest() {
+    let node = document.getElementById(&quot;node-removed-test&quot;);
+    let parent = node.parentNode;
+    node.remove();
+    parent.append(node);
+}
+
+function test()
+{
+    const subtreeModifiedTestId = &quot;subtree-modified-test&quot;;
+    const attributeModifiedTestId = &quot;attribute-modified-test&quot;;
+    const nodeRemovedTestId = &quot;node-removed-test&quot;;
+
+    let suite = InspectorTest.createAsyncSuite(&quot;DOMBreakpoints&quot;);
+
+    function teardown(resolve) {
+        let breakpoints = WebInspector.domDebuggerManager.domBreakpoints;
+        for (let breakpoint of breakpoints)
+            WebInspector.domDebuggerManager.removeDOMBreakpoint(breakpoint);
+
+        resolve();
+    }
+
+    function awaitEvaluateInPage(expression) {
+        return new Promise((resolve, reject) =&gt; {
+            InspectorTest.log(&quot;Wait for evaluate in page to return.&quot;);
+            InspectorTest.evaluateInPage(expression, (error) =&gt; {
+                if (error)
+                    reject(error);
+
+                resolve();
+            });
+        });
+    }
+
+    function rejectOnPause() {
+        return new Promise((resolve, reject) =&gt; {
+            WebInspector.debuggerManager.awaitEvent(WebInspector.DebuggerManager.Event.Paused)
+            .then((event) =&gt; {
+                WebInspector.debuggerManager.resume();
+                InspectorTest.fail(&quot;Should not pause.&quot;);
+                reject();
+            });
+        });
+    }
+
+    function awaitQuerySelector(selector) {
+        return new Promise((resolve, reject) =&gt; {
+            WebInspector.domTreeManager.requestDocument((documentNode) =&gt; {
+                if (!documentNode) {
+                    reject();
+                    return;
+                }
+
+                WebInspector.domTreeManager.querySelector(documentNode.id, selector, (nodeId) =&gt; {
+                    if (!nodeId) {
+                        InspectorTest.fail(&quot;Selector returned no nodes.&quot;, selector);
+                        reject();
+                        return;
+                    }
+
+                    let node = WebInspector.domTreeManager.nodeForId(nodeId);
+                    InspectorTest.assert(node, &quot;Missing node for id.&quot;, nodeId);
+                    if (!node) {
+                        reject();
+                        return;
+                    }
+
+                    resolve(node);
+                });
+            });
+        });
+    }
+
+    function addBreakpointForElementIdentifier(elementIdentifier, type, disabled) {
+        return new Promise((resolve, reject) =&gt; {
+            awaitQuerySelector(&quot;#&quot; + elementIdentifier)
+            .then((node) =&gt; {
+                WebInspector.domDebuggerManager.awaitEvent(WebInspector.DOMDebuggerManager.Event.DOMBreakpointAdded)
+                .then((event) =&gt; {
+                    let breakpoint = event.data.breakpoint;
+                    InspectorTest.pass(&quot;Breakpoint added.&quot;);
+                    resolve(event);
+                });
+
+                WebInspector.domDebuggerManager.addDOMBreakpoint(new WebInspector.DOMBreakpoint(node, type, disabled));
+            });
+        });
+    }
+
+    function addSimpleTestCase({name, elementIdentifier, type, expression}) {
+        suite.addTestCase({
+            name: `BreakOn${name}`,
+            description: &quot;Check that debugger pauses for breakpoint type.&quot;,
+            teardown,
+            test(resolve, reject) {
+                addBreakpointForElementIdentifier(elementIdentifier, type)
+                .then((event) =&gt; {
+                    let breakpoint = event.data.breakpoint;
+                    InspectorTest.expectEqual(breakpoint.type, type, &quot;Breakpoint should have expected type.&quot;);
+
+                    InspectorTest.log(&quot;Call DOM operation.&quot;);
+                    InspectorTest.evaluateInPage(expression);
+                    return WebInspector.debuggerManager.awaitEvent(WebInspector.DebuggerManager.Event.Paused);
+                })
+                .then(() =&gt; {
+                    let targetData = WebInspector.debuggerManager.dataForTarget(WebInspector.debuggerManager.activeCallFrame.target);
+                    InspectorTest.log(&quot;PAUSED:&quot;);
+                    InspectorTest.expectEqual(targetData.pauseReason, WebInspector.DebuggerManager.PauseReason.DOM, &quot;Pause reason should be DOM.&quot;);
+                    logActiveStackTrace();
+
+                    return WebInspector.debuggerManager.resume();
+                })
+                .then(resolve, reject);
+            }
+        });
+    }
+
+    suite.addTestCase({
+        name: &quot;BasicBreakpoint&quot;,
+        description: &quot;Check that breakpoint is in a valid initial state.&quot;,
+        teardown,
+        test(resolve, reject) {
+            addBreakpointForElementIdentifier(subtreeModifiedTestId, WebInspector.DOMBreakpoint.Type.SubtreeModified)
+            .then((event) =&gt; {
+                let breakpoint = event.data.breakpoint;
+                InspectorTest.expectFalse(breakpoint.disabled, &quot;Breakpoint should not be disabled.&quot;);
+                InspectorTest.expectThat(breakpoint.domNodeIdentifier, &quot;Breakpoint should have node identifier.&quot;);
+
+                InspectorTest.assert(WebInspector.frameResourceManager.mainFrame, &quot;Missing main frame.&quot;);
+                let documentURL = WebInspector.frameResourceManager.mainFrame.url;
+                InspectorTest.expectEqual(breakpoint.url, documentURL, &quot;Breakpoint URL should match document URL.&quot;);
+            })
+            .then(resolve, reject);
+        }
+    });
+
+    addSimpleTestCase({
+        name: &quot;SubtreeModified&quot;,
+        elementIdentifier: subtreeModifiedTestId,
+        type: WebInspector.DOMBreakpoint.Type.SubtreeModified,
+        expression: &quot;subtreeModifiedTest()&quot;,
+    });
+
+    addSimpleTestCase({
+        name: &quot;AttributeModified&quot;,
+        elementIdentifier: attributeModifiedTestId,
+        type: WebInspector.DOMBreakpoint.Type.AttributeModified,
+        expression: &quot;attributeModifiedTest()&quot;,
+    });
+
+    addSimpleTestCase({
+        name: &quot;NodeRemoved&quot;,
+        elementIdentifier: nodeRemovedTestId,
+        type: WebInspector.DOMBreakpoint.Type.NodeRemoved,
+        expression: &quot;nodeRemovedTest()&quot;,
+    });
+
+    suite.addTestCase({
+        name: &quot;ShouldNotPauseOnDisabledBreakpoint&quot;,
+        description: &quot;Check that debugger does not pause for disabled breakpoint.&quot;,
+        teardown,
+        test(resolve, reject) {
+            const disabled = true;
+            addBreakpointForElementIdentifier(subtreeModifiedTestId, WebInspector.DOMBreakpoint.Type.SubtreeModified, disabled)
+            .then(() =&gt; Promise.race([awaitEvaluateInPage(&quot;modifySubtreeTest()&quot;), rejectOnPause()]))
+            .then(() =&gt; {
+                InspectorTest.pass(&quot;Should not pause for disabled breakpoint.&quot;);
+                resolve();
+            })
+            .catch(reject);
+        }
+    });
+
+    suite.addTestCase({
+        name: &quot;RemoveBreakpoint&quot;,
+        description: &quot;Check that debugger does not pause for removed breakpoint.&quot;,
+        teardown,
+        test(resolve, reject) {
+            addBreakpointForElementIdentifier(subtreeModifiedTestId, WebInspector.DOMBreakpoint.Type.SubtreeModified)
+            .then((event) =&gt; {
+                let promise = WebInspector.domDebuggerManager.awaitEvent(WebInspector.DOMDebuggerManager.Event.DOMBreakpointRemoved);
+                let breakpoint = event.data.breakpoint;
+
+                InspectorTest.log(&quot;Remove breakpoint.&quot;);
+                WebInspector.domDebuggerManager.removeDOMBreakpoint(breakpoint);
+                return promise;
+            })
+            .then(() =&gt; Promise.race([awaitEvaluateInPage(&quot;modifySubtreeTest()&quot;), rejectOnPause()]))
+            .then(() =&gt; {
+                InspectorTest.pass(&quot;Should not pause for removed breakpoint.&quot;);
+                resolve();
+            })
+            .catch(reject);
+        }
+    });
+
+    suite.addTestCase({
+        name: &quot;SetBreakpointWithInvalidNodeId&quot;,
+        description: &quot;Check that setting a breakpoint for a nonexistant node returns an error.&quot;,
+        teardown,
+        test(resolve, reject) {
+            InspectorTest.log(&quot;Attempting to set breakpoint.&quot;);
+
+            DOMDebuggerAgent.setDOMBreakpoint(0, WebInspector.DOMBreakpoint.Type.SubtreeModified, (error) =&gt; {
+                InspectorTest.log(&quot;Protocol result: &quot; + error);
+                InspectorTest.expectThat(error, &quot;Protocol should return an error.&quot;)
+                resolve();
+            });
+        }
+    });
+
+    suite.addTestCase({
+        name: &quot;SetBreakpointWithInvalidType&quot;,
+        description: &quot;Check that setting a breakpoint with an invalid type returns an error.&quot;,
+        teardown,
+        test(resolve, reject) {
+            awaitQuerySelector(&quot;body&quot;)
+            .then((node) =&gt; {
+                InspectorTest.log(&quot;Attempting to set breakpoint.&quot;);
+
+                DOMDebuggerAgent.setDOMBreakpoint(node.id, &quot;custom-breakpoint-type&quot;, (error) =&gt; {
+                    InspectorTest.log(&quot;Protocol result: &quot; + error);
+                    InspectorTest.expectThat(error, &quot;Protocol should return an error.&quot;)
+                    resolve();
+                });
+            });
+        }
+    });
+
+    suite.addTestCase({
+        name: &quot;RemoveBreakpointWithInvalidNodeId&quot;,
+        description: &quot;Check that removing a breakpoint for a nonexistant node returns an error.&quot;,
+        teardown,
+        test(resolve, reject) {
+            InspectorTest.log(&quot;Attempting to remove breakpoint.&quot;);
+
+            DOMDebuggerAgent.removeDOMBreakpoint(0, WebInspector.DOMBreakpoint.Type.SubtreeModified, (error) =&gt; {
+                InspectorTest.log(&quot;Protocol result: &quot; + error);
+                InspectorTest.expectThat(error, &quot;Protocol should return an error.&quot;)
+                resolve();
+            });
+        }
+    });
+
+    suite.addTestCase({
+        name: &quot;RemoveBreakpointWithInvalidType&quot;,
+        description: &quot;Check that removing a breakpoint with an invalid type returns an error.&quot;,
+        teardown,
+        test(resolve, reject) {
+            awaitQuerySelector(&quot;body&quot;)
+            .then((node) =&gt; {
+                InspectorTest.log(&quot;Attempting to remove breakpoint.&quot;);
+
+                DOMDebuggerAgent.removeDOMBreakpoint(node.id, &quot;custom-breakpoint-type&quot;, (error) =&gt; {
+                    InspectorTest.log(&quot;Protocol result: &quot; + error);
+                    InspectorTest.expectThat(error, &quot;Protocol should return an error.&quot;)
+                    resolve();
+                });
+            });
+        }
+    });
+
+    suite.runTestCasesAndFinish();
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload=&quot;runTest()&quot;&gt;
+&lt;p&gt;Tests for DOM breakpoints.&lt;/p&gt;
+&lt;div id=&quot;test-container&quot; style=&quot;display: none&quot;&gt;
+    &lt;div id=&quot;subtree-modified-test&quot;&gt;&lt;/div&gt;
+    &lt;div id=&quot;attribute-modified-test&quot;&gt;&lt;/div&gt;
+    &lt;div id=&quot;node-removed-test&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebCore/ChangeLog        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -1,3 +1,30 @@
</span><ins>+2017-03-08  Matt Baker  &lt;mattbaker@apple.com&gt;
+
+        Web Inspector: Add DOM breakpoints UI for node/subtree modification events
+        https://bugs.webkit.org/show_bug.cgi?id=168101
+
+        Reviewed by Joseph Pecoraro.
+
+        Test: inspector/dom-debugger/dom-breakpoints.html
+
+        * inspector/InspectorDOMAgent.h:
+        Removed declarations for undefined member functions.
+
+        * inspector/InspectorDOMDebuggerAgent.cpp:
+        (WebCore::InspectorDOMDebuggerAgent::disable):
+        (WebCore::InspectorDOMDebuggerAgent::mainFrameDOMContentLoaded):
+        (WebCore::InspectorDOMDebuggerAgent::willInsertDOMNode):
+        (WebCore::InspectorDOMDebuggerAgent::willRemoveDOMNode):
+        (WebCore::InspectorDOMDebuggerAgent::willModifyDOMAttr):
+        Check that DebuggerAgent breakpoints are active before breaking.
+        (WebCore::InspectorDOMDebuggerAgent::clear): Deleted.
+        Replaced by call to discardBindings.
+        * inspector/InspectorDOMDebuggerAgent.h:
+
+        * inspector/InspectorInstrumentation.cpp:
+        (WebCore::InspectorInstrumentation::domContentLoadedEventFiredImpl):
+        DOMDebugger agent needs to discard bindings when the main frame navigates.
+
</ins><span class="cx"> 2017-03-08  Jiewen Tan  &lt;jiewen_tan@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         [WebCrypto] Implement ECDH DeriveBits operation
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorInspectorDOMAgenth"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/InspectorDOMAgent.h (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/InspectorDOMAgent.h        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebCore/inspector/InspectorDOMAgent.h        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -225,9 +225,6 @@
</span><span class="cx">     int pushNodePathToFrontend(Node*);
</span><span class="cx">     void pushChildNodesToFrontend(int nodeId, int depth = 1);
</span><span class="cx"> 
</span><del>-    bool hasBreakpoint(Node*, int type);
-    void updateSubtreeBreakpoints(Node* root, uint32_t rootMask, bool value);
-
</del><span class="cx">     Ref&lt;Inspector::Protocol::DOM::Node&gt; buildObjectForNode(Node*, int depth, NodeToIdMap*);
</span><span class="cx">     Ref&lt;Inspector::Protocol::Array&lt;String&gt;&gt; buildArrayForElementAttributes(Element*);
</span><span class="cx">     Ref&lt;Inspector::Protocol::Array&lt;Inspector::Protocol::DOM::Node&gt;&gt; buildArrayForContainerChildren(Node* container, int depth, NodeToIdMap* nodesMap);
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorInspectorDOMDebuggerAgentcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/InspectorDOMDebuggerAgent.cpp (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/InspectorDOMDebuggerAgent.cpp        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebCore/inspector/InspectorDOMDebuggerAgent.cpp        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -88,7 +88,7 @@
</span><span class="cx"> void InspectorDOMDebuggerAgent::disable()
</span><span class="cx"> {
</span><span class="cx">     m_instrumentingAgents.setInspectorDOMDebuggerAgent(nullptr);
</span><del>-    clear();
</del><ins>+    discardBindings();
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> void InspectorDOMDebuggerAgent::didCreateFrontendAndBackend(Inspector::FrontendRouter*, Inspector::BackendDispatcher*)
</span><span class="lines">@@ -106,6 +106,11 @@
</span><span class="cx">     m_debuggerAgent = nullptr;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+void InspectorDOMDebuggerAgent::mainFrameDOMContentLoaded()
+{
+    discardBindings();
+}
+
</ins><span class="cx"> void InspectorDOMDebuggerAgent::discardBindings()
</span><span class="cx"> {
</span><span class="cx">     m_domBreakpoints.clear();
</span><span class="lines">@@ -253,6 +258,9 @@
</span><span class="cx"> 
</span><span class="cx"> void InspectorDOMDebuggerAgent::willInsertDOMNode(Node&amp; parent)
</span><span class="cx"> {
</span><ins>+    if (!m_debuggerAgent-&gt;breakpointsActive())
+        return;
+
</ins><span class="cx">     if (hasBreakpoint(&amp;parent, SubtreeModified)) {
</span><span class="cx">         Ref&lt;InspectorObject&gt; eventData = InspectorObject::create();
</span><span class="cx">         descriptionForDOMEvent(parent, SubtreeModified, true, eventData.get());
</span><span class="lines">@@ -262,6 +270,9 @@
</span><span class="cx"> 
</span><span class="cx"> void InspectorDOMDebuggerAgent::willRemoveDOMNode(Node&amp; node)
</span><span class="cx"> {
</span><ins>+    if (!m_debuggerAgent-&gt;breakpointsActive())
+        return;
+
</ins><span class="cx">     Node* parentNode = InspectorDOMAgent::innerParentNode(&amp;node);
</span><span class="cx">     if (hasBreakpoint(&amp;node, NodeRemoved)) {
</span><span class="cx">         Ref&lt;InspectorObject&gt; eventData = InspectorObject::create();
</span><span class="lines">@@ -276,6 +287,9 @@
</span><span class="cx"> 
</span><span class="cx"> void InspectorDOMDebuggerAgent::willModifyDOMAttr(Element&amp; element)
</span><span class="cx"> {
</span><ins>+    if (!m_debuggerAgent-&gt;breakpointsActive())
+        return;
+
</ins><span class="cx">     if (hasBreakpoint(&amp;element, AttributeModified)) {
</span><span class="cx">         Ref&lt;InspectorObject&gt; eventData = InspectorObject::create();
</span><span class="cx">         descriptionForDOMEvent(element, AttributeModified, false, eventData.get());
</span><span class="lines">@@ -400,9 +414,4 @@
</span><span class="cx">     m_debuggerAgent-&gt;breakProgram(Inspector::DebuggerFrontendDispatcher::Reason::XHR, WTFMove(eventData));
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-void InspectorDOMDebuggerAgent::clear()
-{
-    m_domBreakpoints.clear();
-}
-
</del><span class="cx"> } // namespace WebCore
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorInspectorDOMDebuggerAgenth"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/InspectorDOMDebuggerAgent.h (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/InspectorDOMDebuggerAgent.h        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebCore/inspector/InspectorDOMDebuggerAgent.h        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -75,6 +75,7 @@
</span><span class="cx">     void willModifyDOMAttr(Element&amp;);
</span><span class="cx">     void willSendXMLHttpRequest(const String&amp; url);
</span><span class="cx">     void pauseOnNativeEventIfNeeded(bool isDOMEvent, const String&amp; eventName, bool synchronous);
</span><ins>+    void mainFrameDOMContentLoaded();
</ins><span class="cx"> 
</span><span class="cx">     void didCreateFrontendAndBackend(Inspector::FrontendRouter*, Inspector::BackendDispatcher*) override;
</span><span class="cx">     void willDestroyFrontendAndBackend(Inspector::DisconnectReason) override;
</span><span class="lines">@@ -93,8 +94,6 @@
</span><span class="cx">     void setBreakpoint(ErrorString&amp;, const String&amp; eventName);
</span><span class="cx">     void removeBreakpoint(ErrorString&amp;, const String&amp; eventName);
</span><span class="cx"> 
</span><del>-    void clear();
-
</del><span class="cx">     RefPtr&lt;Inspector::DOMDebuggerBackendDispatcher&gt; m_backendDispatcher;
</span><span class="cx">     InspectorDOMAgent* m_domAgent { nullptr };
</span><span class="cx">     Inspector::InspectorDebuggerAgent* m_debuggerAgent { nullptr };
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorInspectorInstrumentationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/InspectorInstrumentation.cpp (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/InspectorInstrumentation.cpp        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebCore/inspector/InspectorInstrumentation.cpp        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -667,6 +667,9 @@
</span><span class="cx">     if (InspectorDOMAgent* domAgent = instrumentingAgents.inspectorDOMAgent())
</span><span class="cx">         domAgent-&gt;mainFrameDOMContentLoaded();
</span><span class="cx"> 
</span><ins>+    if (InspectorDOMDebuggerAgent* domDebuggerAgent = instrumentingAgents.inspectorDOMDebuggerAgent())
+        domDebuggerAgent-&gt;mainFrameDOMContentLoaded();
+
</ins><span class="cx">     if (InspectorPageAgent* pageAgent = instrumentingAgents.inspectorPageAgent())
</span><span class="cx">         pageAgent-&gt;domContentEventFired();
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/ChangeLog        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -1,3 +1,216 @@
</span><ins>+2017-03-08  Matt Baker  &lt;mattbaker@apple.com&gt;
+
+        Web Inspector: Add DOM breakpoints UI for node/subtree modification events
+        https://bugs.webkit.org/show_bug.cgi?id=168101
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        New UI strings.
+
+        * UserInterface/Base/Main.js:
+        (WebInspector.loaded):
+        Add new manager.
+
+        * UserInterface/Controllers/DOMBreakpointTreeController.js: Added.
+        Handles messages from DOMDebuggerManager, and updates an associated
+        tree outline as DOM breakpoints are added and removed.
+        (WebInspector.DOMBreakpointTreeController):
+        (WebInspector.DOMBreakpointTreeController.appendBreakpointContextMenuItems):
+        (WebInspector.DOMBreakpointTreeController.prototype.disconnect):
+        (WebInspector.DOMBreakpointTreeController.prototype._addBreakpointTreeElement):
+        (WebInspector.DOMBreakpointTreeController.prototype._removeBreakpointTreeElement):
+        (WebInspector.DOMBreakpointTreeController.prototype._domBreakpointAdded):
+        (WebInspector.DOMBreakpointTreeController.prototype._domBreakpointRemoved):
+        (WebInspector.DOMBreakpointTreeController.prototype._domBreakpointResolvedStateDidChange):
+        (WebInspector.DOMBreakpointTreeController.prototype._mainResourceDidChange):
+
+        * UserInterface/Controllers/DOMDebuggerManager.js: Added.
+        New frontend manager for the DOMDebugger domain. A DOM breakpoint is
+        described by a location (URL and node path) and type. The manager keeps
+        all known DOM breakpoints in memory, and considers a breakpoint to be
+        &quot;resolved&quot; once its location is pushed to the frontend.
+
+        Breakpoints located within a child frame are still associated with the
+        main frame. Whenever a the main resource of a child frame changes, all
+        unresolved breakpoints associated with the main frame are speculatively
+        resolved.
+
+        (WebInspector.DOMDebuggerManager):
+        (WebInspector.DOMDebuggerManager.prototype.get supported):
+        (WebInspector.DOMDebuggerManager.prototype.get domBreakpoints):
+        (WebInspector.DOMDebuggerManager.prototype.domBreakpointsForNode):
+        (WebInspector.DOMDebuggerManager.prototype.addDOMBreakpoint):
+        (WebInspector.DOMDebuggerManager.prototype.removeDOMBreakpoint):
+        (WebInspector.DOMDebuggerManager.prototype._detachDOMBreakpoint):
+        (WebInspector.DOMDebuggerManager.prototype._detachBreakpointsForFrame):
+        (WebInspector.DOMDebuggerManager.prototype._speculativelyResolveBreakpoints):
+        (WebInspector.DOMDebuggerManager.prototype._resolveDOMBreakpoint):
+        (WebInspector.DOMDebuggerManager.prototype._updateDOMBreakpoint):
+        (WebInspector.DOMDebuggerManager.prototype._saveBreakpoints):
+        (WebInspector.DOMDebuggerManager.prototype._domBreakpointDisabledStateDidChange):
+        (WebInspector.DOMDebuggerManager.prototype._childFrameWasRemoved):
+        (WebInspector.DOMDebuggerManager.prototype._mainFrameDidChange):
+        (WebInspector.DOMDebuggerManager.prototype._mainResourceDidChange):
+        (WebInspector.DOMDebuggerManager.prototype._nodeInserted):
+        (WebInspector.DOMDebuggerManager.prototype._nodeRemoved):
+
+        * UserInterface/Controllers/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype._pauseReasonFromPayload):
+        Plumbing for DOM breakpoint pause reason.
+
+        * UserInterface/Images/DOMBreakpoint.svg: Added.
+        New art. Visually very similar to a script breakpoint, with some
+        tweaks to make it suitable for display in the DOM tree gutter.
+
+        * UserInterface/Main.html:
+        New files.
+
+        * UserInterface/Models/DOMBreakpoint.js: Added.
+        New model class. DOM breakpoints are either associated with a DOM node
+        when created, or constructed from a cookie and resolved in the future.
+
+        (WebInspector.DOMBreakpoint):
+        (WebInspector.DOMBreakpoint.prototype.get type):
+        (WebInspector.DOMBreakpoint.prototype.get url):
+        (WebInspector.DOMBreakpoint.prototype.get path):
+        (WebInspector.DOMBreakpoint.prototype.get disabled):
+        (WebInspector.DOMBreakpoint.prototype.set disabled):
+        (WebInspector.DOMBreakpoint.prototype.get domNodeIdentifier):
+        (WebInspector.DOMBreakpoint.prototype.set domNodeIdentifier):
+        (WebInspector.DOMBreakpoint.prototype.get serializableInfo):
+        (WebInspector.DOMBreakpoint.prototype.saveIdentityToCookie):
+
+        * UserInterface/Protocol/Legacy/10.0/InspectorBackendCommands.js:
+        * UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js:
+        * UserInterface/Protocol/Legacy/7.0/InspectorBackendCommands.js:
+        * UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js:
+        * UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js:
+        * UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js:
+        The DOMDebugger should not be enabled for legacy backends, since legacy
+        backend support was never tested and may have issues.
+
+        * UserInterface/Test.html:
+        New files.
+
+        * UserInterface/Test/Test.js:
+        (WebInspector.loaded):
+        Add new manager.
+
+        * UserInterface/Views/ContentView.js:
+        (WebInspector.ContentView.createFromRepresentedObject):
+        (WebInspector.ContentView.resolvedRepresentedObjectForRepresentedObject):
+        Plumbing for additional represented object types. DOMNode is included
+        because the Debugger sidebar panel shows DOM breakpoint tree elements
+        as children of a DOM node tree element.
+
+        * UserInterface/Views/DOMBreakpointTreeElement.css: Added.
+        (.item.dom-breakpoint .icon):
+        (.item.dom-breakpoint.breakpoint-paused-icon .icon):
+        (.item.dom-breakpoint .status img):
+        (.item.dom-breakpoint .status &gt; img.disabled):
+        Styles for &quot;Pause Reason&quot; and &quot;DOM Breakpoints&quot; sections.
+
+        * UserInterface/Views/DOMBreakpointTreeElement.js: Added.
+        Tree element class for DOM breakpoints. Includes a breakpoint status
+        element and context menu for delete/disable actions, similar to script
+        breakpoint tree elements.
+
+        (WebInspector.DOMBreakpointTreeElement):
+        (WebInspector.DOMBreakpointTreeElement.displayNameForType):
+        (WebInspector.DOMBreakpointTreeElement.prototype.onattach):
+        (WebInspector.DOMBreakpointTreeElement.prototype.ondetach):
+        (WebInspector.DOMBreakpointTreeElement.prototype.ondelete):
+        (WebInspector.DOMBreakpointTreeElement.prototype.onenter):
+        (WebInspector.DOMBreakpointTreeElement.prototype.onspace):
+        (WebInspector.DOMBreakpointTreeElement.prototype.populateContextMenu):
+        (WebInspector.DOMBreakpointTreeElement.prototype._statusImageElementClicked):
+        (WebInspector.DOMBreakpointTreeElement.prototype._statusImageElementFocused):
+        (WebInspector.DOMBreakpointTreeElement.prototype._statusImageElementMouseDown):
+        (WebInspector.DOMBreakpointTreeElement.prototype._toggleBreakpoint):
+        (WebInspector.DOMBreakpointTreeElement.prototype._updateStatus):
+
+        * UserInterface/Views/DOMNodeTreeElement.js: Added.
+        Tree element class for DOM nodes, which serves as a parent for DOM
+        breakpoint tree elements. Includes context menu for bulk delete/disable
+        of all child breakpoints.
+
+        (WebInspector.DOMNodeTreeElement):
+        (WebInspector.DOMNodeTreeElement.prototype.ondelete):
+        (WebInspector.DOMNodeTreeElement.prototype.populateContextMenu):
+
+        * UserInterface/Views/DOMTreeContentView.css:
+        Styles for DOM breakpoint gutter and breakpoint indicators, including
+        &quot;left pointing&quot; breakpoints for RTL mode.
+
+        (.content-view.dom-tree.show-gutter .tree-outline.dom):
+        (body[dir=ltr] .content-view.dom-tree.show-gutter .tree-outline.dom):
+        (body[dir=rtl] .content-view.dom-tree.show-gutter .tree-outline.dom):
+        (.content-view.dom-tree .tree-outline.dom li .status-image):
+        (body[dir=ltr] .content-view.dom-tree .tree-outline.dom li .status-image):
+        (body[dir=rtl] .content-view.dom-tree .tree-outline.dom li .status-image):
+        (.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint):
+        (body:not(.window-inactive) .content-view.dom-tree .tree-outline.dom:focus li.selected .status-image.breakpoint):
+        (.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.disabled):
+        (.content-view.dom-tree .tree-outline.dom.breakpoints-disabled li .status-image.breakpoint):
+        (.content-view.dom-tree .tree-outline.dom.breakpoints-disabled li .status-image.breakpoint.disabled):
+
+        * UserInterface/Views/DOMTreeContentView.js:
+        Add support for DOM breakpoint gutter and breakpoint indicators.
+        Breakpoint indicator elements are part of the DOM tree element, and are
+        updated whenever there a breakpoint's disabled or resolved state changes.
+
+        (WebInspector.DOMTreeContentView):
+        (WebInspector.DOMTreeContentView.prototype.get breakpointGutterEnabled):
+        (WebInspector.DOMTreeContentView.prototype.set breakpointGutterEnabled):
+        (WebInspector.DOMTreeContentView.prototype.shown):
+        (WebInspector.DOMTreeContentView.prototype.closed):
+        (WebInspector.DOMTreeContentView.prototype._domTreeElementAdded):
+        (WebInspector.DOMTreeContentView.prototype._domBreakpointAddedOrRemoved):
+        (WebInspector.DOMTreeContentView.prototype._domBreakpointDisabledStateDidChange):
+        (WebInspector.DOMTreeContentView.prototype._domBreakpointResolvedStateDidChange):
+        (WebInspector.DOMTreeContentView.prototype._updateBreakpointStatus):
+        (WebInspector.DOMTreeContentView.prototype._restoreBreakpointsAfterUpdate):
+        (WebInspector.DOMTreeContentView.prototype._breakpointsEnabledDidChange):
+
+        * UserInterface/Views/DOMTreeElement.js:
+        Add support for breakpoint status element and content menu.
+        (WebInspector.DOMTreeElement):
+        (WebInspector.DOMTreeElement.prototype.get breakpointStatus):
+        (WebInspector.DOMTreeElement.prototype.set breakpointStatus):
+        (WebInspector.DOMTreeElement.prototype._populateNodeContextMenu):
+        (WebInspector.DOMTreeElement.prototype.updateTitle):
+        (WebInspector.DOMTreeElement.prototype._updateBreakpointStatus):
+        (WebInspector.DOMTreeElement.prototype._statusImageContextmenu):
+
+        * UserInterface/Views/DebuggerSidebarPanel.css:
+        (.sidebar &gt; .panel.navigation.debugger .details-section.dom-breakpoints .item.dom-node .titles):
+        (.sidebar &gt; .panel.navigation.debugger .details-section.dom-breakpoints .item.dom-node .icon):
+        Styles for DOM node tree elements.
+
+        * UserInterface/Views/DebuggerSidebarPanel.js:
+        Add new DOM Breakpoints section, and support for the &quot;DOM&quot; pause reason.
+
+        (WebInspector.DebuggerSidebarPanel):
+        (WebInspector.DebuggerSidebarPanel.prototype.closed):
+        (WebInspector.DebuggerSidebarPanel.prototype._updatePauseReasonSection):
+        (WebInspector.DebuggerSidebarPanel.prototype._domBreakpointAddedOrRemoved):
+
+        * UserInterface/Views/FrameDOMTreeContentView.js:
+        (WebInspector.FrameDOMTreeContentView.prototype._rootDOMNodeAvailable):
+        Restore DOM breakpoints once the root node is available.
+
+        * UserInterface/Views/Variables.css:
+        (:root):
+        Fill and stroke colors for resolved, unresolved, and disabled breakpoints.
+
+        * Versions/Inspector-iOS-10.0.json:
+        * Versions/Inspector-iOS-10.3.json:
+        * Versions/Inspector-iOS-7.0.json:
+        * Versions/Inspector-iOS-8.0.json:
+        * Versions/Inspector-iOS-9.0.json:
+        * Versions/Inspector-iOS-9.3.json:
+
</ins><span class="cx"> 2017-03-08  Devin Rousso  &lt;dcrousso+webkit@gmail.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: RTL: table header columns and cells don't line up, dragging seems backwards
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -103,6 +103,7 @@
</span><span class="cx"> localizedStrings[&quot;Assertive&quot;] = &quot;Assertive&quot;;
</span><span class="cx"> localizedStrings[&quot;Attach&quot;] = &quot;Attach&quot;;
</span><span class="cx"> localizedStrings[&quot;Attribute&quot;] = &quot;Attribute&quot;;
</span><ins>+localizedStrings[&quot;Attribute Modified&quot;] = &quot;Attribute Modified&quot;;
</ins><span class="cx"> localizedStrings[&quot;Attributes&quot;] = &quot;Attributes&quot;;
</span><span class="cx"> localizedStrings[&quot;Author Stylesheet&quot;] = &quot;Author Stylesheet&quot;;
</span><span class="cx"> localizedStrings[&quot;Auto Increment&quot;] = &quot;Auto Increment&quot;;
</span><span class="lines">@@ -120,6 +121,7 @@
</span><span class="cx"> localizedStrings[&quot;Boundary&quot;] = &quot;Boundary&quot;;
</span><span class="cx"> localizedStrings[&quot;Box Model&quot;] = &quot;Box Model&quot;;
</span><span class="cx"> localizedStrings[&quot;Box Shadow&quot;] = &quot;Box Shadow&quot;;
</span><ins>+localizedStrings[&quot;Break on…&quot;] = &quot;Break on…&quot;;
</ins><span class="cx"> localizedStrings[&quot;Breakdown&quot;] = &quot;Breakdown&quot;;
</span><span class="cx"> localizedStrings[&quot;Breakdown of each memory category at the end of the selected time range&quot;] = &quot;Breakdown of each memory category at the end of the selected time range&quot;;
</span><span class="cx"> localizedStrings[&quot;Breakpoints&quot;] = &quot;Breakpoints&quot;;
</span><span class="lines">@@ -221,6 +223,7 @@
</span><span class="cx"> localizedStrings[&quot;Cursor&quot;] = &quot;Cursor&quot;;
</span><span class="cx"> localizedStrings[&quot;Custom&quot;] = &quot;Custom&quot;;
</span><span class="cx"> localizedStrings[&quot;DNS&quot;] = &quot;DNS&quot;;
</span><ins>+localizedStrings[&quot;DOM Breakpoints&quot;] = &quot;DOM Breakpoints&quot;;
</ins><span class="cx"> localizedStrings[&quot;DOM Content Loaded \u2014 %s&quot;] = &quot;DOM Content Loaded \u2014 %s&quot;;
</span><span class="cx"> localizedStrings[&quot;Damping&quot;] = &quot;Damping&quot;;
</span><span class="cx"> localizedStrings[&quot;Dash Array&quot;] = &quot;Dash Array&quot;;
</span><span class="lines">@@ -520,6 +523,7 @@
</span><span class="cx"> localizedStrings[&quot;No Application Cache information available&quot;] = &quot;No Application Cache information available&quot;;
</span><span class="cx"> localizedStrings[&quot;No Attributes&quot;] = &quot;No Attributes&quot;;
</span><span class="cx"> localizedStrings[&quot;No Box Model Information&quot;] = &quot;No Box Model Information&quot;;
</span><ins>+localizedStrings[&quot;No Breakpoints&quot;] = &quot;No Breakpoints&quot;;
</ins><span class="cx"> localizedStrings[&quot;No Chart Available&quot;] = &quot;No Chart Available&quot;;
</span><span class="cx"> localizedStrings[&quot;No Child Layers&quot;] = &quot;No Child Layers&quot;;
</span><span class="cx"> localizedStrings[&quot;No Entries&quot;] = &quot;No Entries&quot;;
</span><span class="lines">@@ -539,6 +543,7 @@
</span><span class="cx"> localizedStrings[&quot;No message&quot;] = &quot;No message&quot;;
</span><span class="cx"> localizedStrings[&quot;No preview available&quot;] = &quot;No preview available&quot;;
</span><span class="cx"> localizedStrings[&quot;Node&quot;] = &quot;Node&quot;;
</span><ins>+localizedStrings[&quot;Node Removed&quot;] = &quot;Node Removed&quot;;
</ins><span class="cx"> localizedStrings[&quot;Not found&quot;] = &quot;Not found&quot;;
</span><span class="cx"> localizedStrings[&quot;Number&quot;] = &quot;Number&quot;;
</span><span class="cx"> localizedStrings[&quot;Numeric&quot;] = &quot;Numeric&quot;;
</span><span class="lines">@@ -767,6 +772,7 @@
</span><span class="cx"> localizedStrings[&quot;Styles \u2014 Visual&quot;] = &quot;Styles \u2014 Visual&quot;;
</span><span class="cx"> localizedStrings[&quot;Stylesheet&quot;] = &quot;Stylesheet&quot;;
</span><span class="cx"> localizedStrings[&quot;Stylesheets&quot;] = &quot;Stylesheets&quot;;
</span><ins>+localizedStrings[&quot;Subtree Modified&quot;] = &quot;Subtree Modified&quot;;
</ins><span class="cx"> localizedStrings[&quot;System Default&quot;] = &quot;System Default&quot;;
</span><span class="cx"> localizedStrings[&quot;Tab width:&quot;] = &quot;Tab width:&quot;;
</span><span class="cx"> localizedStrings[&quot;Tabs&quot;] = &quot;Tabs&quot;;
</span><span class="lines">@@ -811,6 +817,7 @@
</span><span class="cx"> localizedStrings[&quot;Transform&quot;] = &quot;Transform&quot;;
</span><span class="cx"> localizedStrings[&quot;Transition&quot;] = &quot;Transition&quot;;
</span><span class="cx"> localizedStrings[&quot;Triggered Breakpoint&quot;] = &quot;Triggered Breakpoint&quot;;
</span><ins>+localizedStrings[&quot;Triggered DOM Breakpoint&quot;] = &quot;Triggered DOM Breakpoint&quot;;
</ins><span class="cx"> localizedStrings[&quot;True&quot;] = &quot;True&quot;;
</span><span class="cx"> localizedStrings[&quot;Type&quot;] = &quot;Type&quot;;
</span><span class="cx"> localizedStrings[&quot;Type Issue&quot;] = &quot;Type Issue&quot;;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseMainjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -135,6 +135,7 @@
</span><span class="cx">     this.probeManager = new WebInspector.ProbeManager;
</span><span class="cx">     this.workerManager = new WebInspector.WorkerManager;
</span><span class="cx">     this.replayManager = new WebInspector.ReplayManager;
</span><ins>+    this.domDebuggerManager = new WebInspector.DOMDebuggerManager;
</ins><span class="cx"> 
</span><span class="cx">     // Enable the Console Agent after creating the singleton managers.
</span><span class="cx">     ConsoleAgent.enable();
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceControllersDOMBreakpointTreeControllerjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMBreakpointTreeController.js (0 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMBreakpointTreeController.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMBreakpointTreeController.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -0,0 +1,171 @@
</span><ins>+/*
+ * Copyright (C) 2017 Apple 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.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMBreakpointTreeController = class DOMBreakpointsTreeController extends WebInspector.Object
+{
+    constructor(treeOutline)
+    {
+        super();
+
+        this._treeOutline = treeOutline;
+        this._breakpointTreeElements = new Map;
+        this._domNodeTreeElements = new Map;
+
+        WebInspector.DOMBreakpoint.addEventListener(WebInspector.DOMBreakpoint.Event.ResolvedStateDidChange, this._domBreakpointResolvedStateDidChange, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+        WebInspector.domDebuggerManager.addEventListener(WebInspector.DOMDebuggerManager.Event.DOMBreakpointAdded, this._domBreakpointAdded, this);
+        WebInspector.domDebuggerManager.addEventListener(WebInspector.DOMDebuggerManager.Event.DOMBreakpointRemoved, this._domBreakpointRemoved, this);
+    }
+
+    // Static
+
+    static appendBreakpointContextMenuItems(contextMenu, domNode, allowEditing)
+    {
+        let subMenu = contextMenu.appendSubMenuItem(WebInspector.UIString(&quot;Break on…&quot;));
+
+        let breakpoints = WebInspector.domDebuggerManager.domBreakpointsForNode(domNode);
+        let keyValuePairs = breakpoints.map((breakpoint) =&gt; [breakpoint.type, breakpoint]);
+        let breakpointsByType = new Map(keyValuePairs);
+
+        for (let type of Object.values(WebInspector.DOMBreakpoint.Type)) {
+            let label = WebInspector.DOMBreakpointTreeElement.displayNameForType(type);
+            let breakpoint = breakpointsByType.get(type);
+
+            subMenu.appendCheckboxItem(label, function() {
+                if (breakpoint)
+                    WebInspector.domDebuggerManager.removeDOMBreakpoint(breakpoint);
+                else
+                    WebInspector.domDebuggerManager.addDOMBreakpoint(new WebInspector.DOMBreakpoint(domNode, type));
+            }, !!breakpoint, false);
+        }
+
+        if (allowEditing) {
+            contextMenu.appendSeparator();
+
+            let shouldEnable = breakpoints.some((breakpoint) =&gt; breakpoint.disabled);
+            let label = shouldEnable ? WebInspector.UIString(&quot;Enable Breakpoints&quot;) : WebInspector.UIString(&quot;Disable Breakpoints&quot;);
+            contextMenu.appendItem(label, () =&gt; {
+                breakpoints.forEach((breakpoint) =&gt; breakpoint.disabled = !shouldEnable);
+            });
+
+            contextMenu.appendItem(WebInspector.UIString(&quot;Delete Breakpoints&quot;), function() {
+                let breakpoints = WebInspector.domDebuggerManager.domBreakpointsForNode(domNode);
+                for (let breakpoint of breakpoints)
+                    WebInspector.domDebuggerManager.removeDOMBreakpoint(breakpoint);
+            });
+        }
+    }
+
+    // Public
+
+    disconnect()
+    {
+        WebInspector.DOMBreakpoint.removeEventListener(null, null, this);
+        WebInspector.Frame.removeEventListener(null, null, this);
+        WebInspector.domDebuggerManager.removeEventListener(null, null, this);
+    }
+
+    // Private
+
+    _addBreakpointTreeElement(breakpoint)
+    {
+        let nodeIdentifier = breakpoint.domNodeIdentifier;
+        let parentTreeElement = this._domNodeTreeElements.get(nodeIdentifier);
+        let shouldExpandParent = false;
+
+        if (!parentTreeElement) {
+            let domNode = WebInspector.domTreeManager.nodeForId(nodeIdentifier);
+            console.assert(domNode, &quot;Missing DOMNode for identifier&quot;, nodeIdentifier);
+
+            parentTreeElement = new WebInspector.DOMNodeTreeElement(domNode);
+            this._treeOutline.appendChild(parentTreeElement);
+            this._domNodeTreeElements.set(nodeIdentifier, parentTreeElement);
+
+            shouldExpandParent = true;
+        }
+
+        let treeElement = new WebInspector.DOMBreakpointTreeElement(breakpoint);
+        parentTreeElement.appendChild(treeElement);
+
+        if (shouldExpandParent)
+            parentTreeElement.expand();
+
+        this._breakpointTreeElements.set(breakpoint, treeElement);
+    }
+
+    _removeBreakpointTreeElement(breakpoint)
+    {
+        let breakpointTreeElement = this._breakpointTreeElements.get(breakpoint);
+        if (!breakpointTreeElement)
+            return;
+
+        let domNodeTreeElement = breakpointTreeElement.parent;
+        console.assert(domNodeTreeElement, &quot;Missing parent DOM node tree element.&quot;);
+
+        domNodeTreeElement.removeChild(breakpointTreeElement);
+        this._breakpointTreeElements.delete(breakpoint);
+
+        if (domNodeTreeElement.hasChildren)
+            return;
+
+        this._treeOutline.removeChild(domNodeTreeElement);
+        this._domNodeTreeElements.delete(breakpoint.domNodeIdentifier);
+    }
+
+    _domBreakpointAdded(event)
+    {
+        let breakpoint = event.data.breakpoint;
+        if (!breakpoint.domNodeIdentifier)
+            return;
+
+        this._addBreakpointTreeElement(breakpoint);
+    }
+
+    _domBreakpointRemoved(event)
+    {
+        this._removeBreakpointTreeElement(event.data.breakpoint);
+    }
+
+    _domBreakpointResolvedStateDidChange(event)
+    {
+        let breakpoint = event.target;
+        if (breakpoint.domNodeIdentifier)
+            this._addBreakpointTreeElement(breakpoint);
+        else
+            this._removeBreakpointTreeElement(breakpoint);
+    }
+
+    _mainResourceDidChange(event)
+    {
+        if (!event.target.isMainFrame())
+            return;
+
+        this._treeOutline.removeChildren();
+
+        this._breakpointTreeElements.clear();
+        this._domNodeTreeElements.clear();
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceControllersDOMDebuggerManagerjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMDebuggerManager.js (0 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMDebuggerManager.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMDebuggerManager.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -0,0 +1,359 @@
</span><ins>+/*
+ * Copyright (C) 2017 Apple 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.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMDebuggerManager = class DOMDebuggerManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._domBreakpointsSetting = new WebInspector.Setting(&quot;dom-breakpoints&quot;, []);
+        this._domBreakpointURLMap = new Map;
+        this._domBreakpointFrameIdentifierMap = new Map;
+
+        WebInspector.DOMBreakpoint.addEventListener(WebInspector.DOMBreakpoint.Event.DisabledStateDidChange, this._domBreakpointDisabledStateDidChange, this);
+
+        WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.NodeRemoved, this._nodeRemoved, this);
+        WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.NodeInserted, this._nodeInserted, this);
+
+        WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.MainFrameDidChange, this._mainFrameDidChange, this);
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._childFrameWasRemoved, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+        if (this.supported) {
+            this._restoringBreakpoints = true;
+
+            for (let cookie of this._domBreakpointsSetting.value) {
+                let breakpoint = new WebInspector.DOMBreakpoint(cookie, cookie.type, cookie.disabled);
+                this.addDOMBreakpoint(breakpoint);
+            }
+
+            this._restoringBreakpoints = false;
+            this._speculativelyResolveBreakpoints();
+        }
+    }
+
+    // Public
+
+    get supported()
+    {
+        return !!window.DOMDebuggerAgent;
+    }
+
+    get domBreakpoints()
+    {
+        let mainFrame = WebInspector.frameResourceManager.mainFrame;
+        if (!mainFrame)
+            return [];
+
+        let resolvedBreakpoints = [];
+        let frames = [mainFrame];
+        while (frames.length) {
+            let frame = frames.shift();
+            let domBreakpointNodeIdentifierMap = this._domBreakpointFrameIdentifierMap.get(frame.id);
+            if (domBreakpointNodeIdentifierMap) {
+                for (let breakpoints of domBreakpointNodeIdentifierMap.values())
+                    resolvedBreakpoints = resolvedBreakpoints.concat(breakpoints);
+            }
+
+            frames = frames.concat(frame.childFrameCollection.toArray());
+        }
+
+        return resolvedBreakpoints;
+    }
+
+    domBreakpointsForNode(node)
+    {
+        console.assert(node instanceof WebInspector.DOMNode);
+
+        if (!node)
+            return [];
+
+        let domBreakpointNodeIdentifierMap = this._domBreakpointFrameIdentifierMap.get(node.frameIdentifier);
+        if (!domBreakpointNodeIdentifierMap)
+            return [];
+
+        let breakpoints = domBreakpointNodeIdentifierMap.get(node.id);
+        return breakpoints ? breakpoints.slice() : [];
+    }
+
+    addDOMBreakpoint(breakpoint)
+    {
+        console.assert(breakpoint instanceof WebInspector.DOMBreakpoint);
+        if (!breakpoint || !breakpoint.url)
+            return;
+
+        let breakpoints = this._domBreakpointURLMap.get(breakpoint.url);
+        if (!breakpoints) {
+            breakpoints = [breakpoint];
+            this._domBreakpointURLMap.set(breakpoint.url, breakpoints);
+        } else
+            breakpoints.push(breakpoint);
+
+        if (breakpoint.domNodeIdentifier)
+            this._resolveDOMBreakpoint(breakpoint, breakpoint.domNodeIdentifier);
+
+        this.dispatchEventToListeners(WebInspector.DOMDebuggerManager.Event.DOMBreakpointAdded, {breakpoint});
+
+        if (!this._restoringBreakpoints)
+            this._saveBreakpoints();
+    }
+
+    removeDOMBreakpoint(breakpoint)
+    {
+        console.assert(breakpoint instanceof WebInspector.DOMBreakpoint);
+        if (!breakpoint)
+            return;
+
+        let nodeIdentifier = breakpoint.domNodeIdentifier;
+        console.assert(nodeIdentifier, &quot;Cannot remove unresolved DOM breakpoint.&quot;);
+        if (!nodeIdentifier)
+            return;
+
+        this._detachDOMBreakpoint(breakpoint);
+
+        let urlBreakpoints = this._domBreakpointURLMap.get(breakpoint.url);
+        urlBreakpoints.remove(breakpoint, true);
+
+        if (!breakpoint.disabled)
+            DOMDebuggerAgent.removeDOMBreakpoint(nodeIdentifier, breakpoint.type);
+
+        if (!urlBreakpoints.length)
+            this._domBreakpointURLMap.delete(breakpoint.url);
+
+        this.dispatchEventToListeners(WebInspector.DOMDebuggerManager.Event.DOMBreakpointRemoved, {breakpoint});
+
+        breakpoint.domNodeIdentifier = null;
+
+        this._saveBreakpoints();
+    }
+
+    // Private
+
+    _detachDOMBreakpoint(breakpoint)
+    {
+        let nodeIdentifier = breakpoint.domNodeIdentifier;
+        let node = WebInspector.domTreeManager.nodeForId(nodeIdentifier);
+        console.assert(node, &quot;Missing DOM node for breakpoint.&quot;, breakpoint);
+        if (!node)
+            return;
+
+        let frameIdentifier = node.frameIdentifier;
+        let domBreakpointNodeIdentifierMap = this._domBreakpointFrameIdentifierMap.get(frameIdentifier);
+        console.assert(domBreakpointNodeIdentifierMap, &quot;Missing DOM breakpoints for node parent frame.&quot;, node);
+        if (!domBreakpointNodeIdentifierMap)
+            return;
+
+        let breakpoints = domBreakpointNodeIdentifierMap.get(nodeIdentifier);
+        console.assert(breakpoints, &quot;Missing DOM breakpoints for node.&quot;, node);
+        if (!breakpoints)
+            return;
+
+        breakpoints.remove(breakpoint, true);
+
+        if (breakpoints.length)
+            return;
+
+        domBreakpointNodeIdentifierMap.delete(nodeIdentifier);
+
+        if (!domBreakpointNodeIdentifierMap.size)
+            this._domBreakpointFrameIdentifierMap.delete(frameIdentifier)
+    }
+
+    _detachBreakpointsForFrame(frame)
+    {
+        let domBreakpointNodeIdentifierMap = this._domBreakpointFrameIdentifierMap.get(frame.id);
+        if (!domBreakpointNodeIdentifierMap)
+            return;
+
+        this._domBreakpointFrameIdentifierMap.delete(frame.id);
+
+        for (let breakpoints of domBreakpointNodeIdentifierMap.values()) {
+            for (let breakpoint of breakpoints)
+                breakpoint.domNodeIdentifier = null;
+        }
+    }
+
+    _speculativelyResolveBreakpoints()
+    {
+        let mainFrame = WebInspector.frameResourceManager.mainFrame;
+        if (!mainFrame)
+            return;
+
+        let breakpoints = this._domBreakpointURLMap.get(mainFrame.url);
+        if (!breakpoints)
+            return;
+
+        for (let breakpoint of breakpoints) {
+            if (breakpoint.domNodeIdentifier)
+                continue;
+
+            WebInspector.domTreeManager.pushNodeByPathToFrontend(breakpoint.path, (nodeIdentifier) =&gt; {
+                if (!nodeIdentifier)
+                    return;
+
+                this._resolveDOMBreakpoint(breakpoint, nodeIdentifier);
+            });
+        }
+    }
+
+    _resolveDOMBreakpoint(breakpoint, nodeIdentifier)
+    {
+        let node = WebInspector.domTreeManager.nodeForId(nodeIdentifier);
+        console.assert(node, &quot;Missing DOM node for nodeIdentifier.&quot;, nodeIdentifier);
+        if (!node)
+            return;
+
+        let frameIdentifier = node.frameIdentifier;
+        let domBreakpointNodeIdentifierMap = this._domBreakpointFrameIdentifierMap.get(frameIdentifier);
+        if (!domBreakpointNodeIdentifierMap) {
+            domBreakpointNodeIdentifierMap = new Map;
+            this._domBreakpointFrameIdentifierMap.set(frameIdentifier, domBreakpointNodeIdentifierMap);
+        }
+
+        let breakpoints = domBreakpointNodeIdentifierMap.get(nodeIdentifier);
+        if (breakpoints)
+            breakpoints.push(breakpoint);
+        else
+            domBreakpointNodeIdentifierMap.set(nodeIdentifier, [breakpoint]);
+
+        breakpoint.domNodeIdentifier = nodeIdentifier;
+
+        this._updateDOMBreakpoint(breakpoint);
+    }
+
+    _updateDOMBreakpoint(breakpoint)
+    {
+        let nodeIdentifier = breakpoint.domNodeIdentifier;
+        if (!nodeIdentifier)
+            return;
+
+        function breakpointUpdated(error)
+        {
+            if (error)
+                console.error(error);
+        }
+
+        if (breakpoint.disabled)
+            DOMDebuggerAgent.removeDOMBreakpoint(nodeIdentifier, breakpoint.type, breakpointUpdated);
+        else
+            DOMDebuggerAgent.setDOMBreakpoint(nodeIdentifier, breakpoint.type, breakpointUpdated);
+    }
+
+    _saveBreakpoints()
+    {
+        if (this._restoringBreakpoints)
+            return;
+
+        let breakpointsToSave = [];
+        for (let breakpoints of this._domBreakpointURLMap.values())
+            breakpointsToSave = breakpointsToSave.concat(breakpoints);
+
+        this._domBreakpointsSetting.value = breakpointsToSave.map((breakpoint) =&gt; breakpoint.serializableInfo);
+    }
+
+    _domBreakpointDisabledStateDidChange(event)
+    {
+        let breakpoint = event.target;
+        this._updateDOMBreakpoint(breakpoint);
+        this._saveBreakpoints();
+    }
+
+    _childFrameWasRemoved(event)
+    {
+        let frame = event.data.childFrame;
+        this._detachBreakpointsForFrame(frame);
+    }
+
+    _mainFrameDidChange()
+    {
+        this._speculativelyResolveBreakpoints();
+    }
+
+    _mainResourceDidChange(event)
+    {
+        let frame = event.target;
+        if (frame.isMainFrame()) {
+            for (let breakpoints of this._domBreakpointURLMap.values())
+                breakpoints.forEach((breakpoint) =&gt; { breakpoint.domNodeIdentifier = null; });
+
+            this._domBreakpointFrameIdentifierMap.clear();
+        } else
+            this._detachBreakpointsForFrame(frame);
+
+        this._speculativelyResolveBreakpoints();
+    }
+
+    _nodeInserted(event)
+    {
+        let node = event.data.node;
+        if (node.nodeType() !== Node.ELEMENT_NODE || !node.ownerDocument)
+            return;
+
+        let url = node.ownerDocument.documentURL;
+        let breakpoints = this._domBreakpointURLMap.get(url);
+        if (!breakpoints)
+            return;
+
+        for (let breakpoint of breakpoints) {
+            if (breakpoint.domNodeIdentifier)
+                continue;
+
+            if (breakpoint.path !== node.path())
+                continue;
+
+            this._resolveDOMBreakpoint(breakpoint, node.id);
+        }
+    }
+
+    _nodeRemoved(event)
+    {
+        let node = event.data.node;
+        if (node.nodeType() !== Node.ELEMENT_NODE || !node.ownerDocument)
+            return;
+
+        let domBreakpointNodeIdentifierMap = this._domBreakpointFrameIdentifierMap.get(node.frameIdentifier);
+        if (!domBreakpointNodeIdentifierMap)
+            return;
+
+        let breakpoints = domBreakpointNodeIdentifierMap.get(node.id);
+        if (!breakpoints)
+            return;
+
+        domBreakpointNodeIdentifierMap.delete(node.id);
+
+        if (!domBreakpointNodeIdentifierMap.size)
+            this._domBreakpointFrameIdentifierMap.delete(node.frameIdentifier);
+
+        for (let breakpoint of breakpoints)
+            breakpoint.domNodeIdentifier = null;
+    }
+};
+
+WebInspector.DOMDebuggerManager.Event = {
+    DOMBreakpointAdded: &quot;dom-debugger-manager-dom-breakpoint-added&quot;,
+    DOMBreakpointRemoved: &quot;dom-debugger-manager-dom-breakpoint-removed&quot;,
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceControllersDebuggerManagerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -807,6 +807,8 @@
</span><span class="cx">             return WebInspector.DebuggerManager.PauseReason.Breakpoint;
</span><span class="cx">         case DebuggerAgent.PausedReason.CSPViolation:
</span><span class="cx">             return WebInspector.DebuggerManager.PauseReason.CSPViolation;
</span><ins>+        case DebuggerAgent.PausedReason.DOM:
+            return WebInspector.DebuggerManager.PauseReason.DOM;
</ins><span class="cx">         case DebuggerAgent.PausedReason.DebuggerStatement:
</span><span class="cx">             return WebInspector.DebuggerManager.PauseReason.DebuggerStatement;
</span><span class="cx">         case DebuggerAgent.PausedReason.Exception:
</span><span class="lines">@@ -1223,6 +1225,7 @@
</span><span class="cx">     Breakpoint: &quot;breakpoint&quot;,
</span><span class="cx">     CSPViolation: &quot;CSP-violation&quot;,
</span><span class="cx">     DebuggerStatement: &quot;debugger-statement&quot;,
</span><ins>+    DOM: &quot;DOM&quot;,
</ins><span class="cx">     Exception: &quot;exception&quot;,
</span><span class="cx">     PauseOnNextStatement: &quot;pause-on-next-statement&quot;,
</span><span class="cx">     Other: &quot;other&quot;,
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesDOMBreakpointsvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/DOMBreakpoint.svg (0 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/DOMBreakpoint.svg                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/DOMBreakpoint.svg        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -0,0 +1,5 @@
</span><ins>+&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
+&lt;!-- Copyright Â© 2017 Apple Inc. All rights reserved. --&gt;
+&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; id=&quot;root&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 15 13&quot;&gt;
+    &lt;path d=&quot;M 8.5 11 L 1.5 11 L 1.5 2 L 8.5 2 L 13.5 6.5 Z&quot;/&gt;
+&lt;/svg&gt;
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -64,6 +64,7 @@
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/ControlToolbarItem.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/CookieIcon.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/CookieStorageContentView.css&quot;&gt;
</span><ins>+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/DOMBreakpointTreeElement.css&quot;&gt;
</ins><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/DOMStorageContentView.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/DOMStorageIcons.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/DOMTreeContentView.css&quot;&gt;
</span><span class="lines">@@ -317,6 +318,7 @@
</span><span class="cx">     &lt;script src=&quot;Models/ConsoleCommandResultMessage.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Models/ContentFlow.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Models/CookieStorageObject.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;Models/DOMBreakpoint.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;Models/DOMNode.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Models/DOMNodeStyles.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Models/DOMSearchMatchObject.js&quot;&gt;&lt;/script&gt;
</span><span class="lines">@@ -516,7 +518,9 @@
</span><span class="cx">     &lt;script src=&quot;Views/ControlToolbarItem.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/CookieStorageContentView.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/CookieStorageTreeElement.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;Views/DOMBreakpointTreeElement.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;Views/DOMNodeDetailsSidebarPanel.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;Views/DOMNodeTreeElement.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;Views/DOMStorageContentView.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/DOMStorageTreeElement.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/DOMTreeDataGrid.js&quot;&gt;&lt;/script&gt;
</span><span class="lines">@@ -717,9 +721,11 @@
</span><span class="cx">     &lt;script src=&quot;Controllers/CodeMirrorSpringEditingController.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/CodeMirrorTokenTrackingController.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/CodeMirrorTextKillController.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;Controllers/DOMDebuggerManager.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;Controllers/DOMTreeManager.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/DashboardManager.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/DebuggerManager.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;Controllers/DOMBreakpointTreeController.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;Controllers/DragToAdjustController.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/Formatter.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/FormatterSourceMap.js&quot;&gt;&lt;/script&gt;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsDOMBreakpointjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Models/DOMBreakpoint.js (0 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMBreakpoint.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMBreakpoint.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -0,0 +1,119 @@
</span><ins>+/*
+ * Copyright (C) 2017 Apple 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.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMBreakpoint = class DOMBreakpoint extends WebInspector.Object
+{
+    constructor(domNodeOrInfo, type, disabled)
+    {
+        console.assert(domNodeOrInfo, &quot;Missing DOMNode or info.&quot;);
+
+        super();
+
+        if (domNodeOrInfo instanceof WebInspector.DOMNode) {
+            this._domNodeIdentifier = domNodeOrInfo.id;
+            this._path = domNodeOrInfo.path();
+            console.assert(WebInspector.frameResourceManager.mainFrame);
+            this._url = WebInspector.frameResourceManager.mainFrame.url;
+        } else if (domNodeOrInfo &amp;&amp; typeof domNodeOrInfo === &quot;object&quot;) {
+            this._domNodeIdentifier = null;
+            this._path = domNodeOrInfo.path;
+            this._url = domNodeOrInfo.url;
+        }
+
+        this._type = type;
+        this._disabled = disabled || false;
+    }
+
+    // Public
+
+    get type() { return this._type; }
+    get url() { return this._url; }
+    get path() { return this._path; }
+
+    get disabled()
+    {
+        return this._disabled;
+    }
+
+    set disabled(disabled)
+    {
+        if (this._disabled === disabled)
+            return;
+
+        this._disabled = disabled;
+
+        this.dispatchEventToListeners(WebInspector.DOMBreakpoint.Event.DisabledStateDidChange);
+    }
+
+    get domNodeIdentifier()
+    {
+        return this._domNodeIdentifier;
+    }
+
+    set domNodeIdentifier(nodeIdentifier)
+    {
+        if (this._domNodeIdentifier === nodeIdentifier)
+            return;
+
+        let data = {};
+        if (!nodeIdentifier)
+            data.oldNodeIdentifier = this._domNodeIdentifier;
+
+        this._domNodeIdentifier = nodeIdentifier;
+
+        this.dispatchEventToListeners(WebInspector.DOMBreakpoint.Event.ResolvedStateDidChange, data);
+    }
+
+    get serializableInfo()
+    {
+        let info = {url: this._url, path: this._path, type: this._type};
+        if (this._disabled)
+            info.disabled = true;
+
+        return info;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.DOMBreakpoint.DocumentURLCookieKey] = this.url;
+        cookie[WebInspector.DOMBreakpoint.NodePathCookieKey] = this.path;
+        cookie[WebInspector.DOMBreakpoint.TypeCookieKey] = this.type;
+    }
+};
+
+WebInspector.DOMBreakpoint.DocumentURLCookieKey = &quot;dom-breakpoint-document-url&quot;;
+WebInspector.DOMBreakpoint.NodePathCookieKey = &quot;dom-breakpoint-node-path&quot;;
+WebInspector.DOMBreakpoint.TypeCookieKey = &quot;dom-breakpoint-type&quot;;
+
+WebInspector.DOMBreakpoint.Type = {
+    SubtreeModified: &quot;subtree-modified&quot;,
+    AttributeModified: &quot;attribute-modified&quot;,
+    NodeRemoved: &quot;node-removed&quot;,
+};
+
+WebInspector.DOMBreakpoint.Event = {
+    DisabledStateDidChange: &quot;dom-breakpoint-disabled-state-did-change&quot;,
+    ResolvedStateDidChange: &quot;dom-breakpoint-resolved-state-did-change&quot;,
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceProtocolLegacy100InspectorBackendCommandsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.0/InspectorBackendCommands.js (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.0/InspectorBackendCommands.js        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.0/InspectorBackendCommands.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -147,18 +147,6 @@
</span><span class="cx"> InspectorBackend.registerCommand(&quot;DOM.focus&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}], []);
</span><span class="cx"> InspectorBackend.activateDomain(&quot;DOM&quot;, &quot;web&quot;);
</span><span class="cx"> 
</span><del>-// DOMDebugger.
-InspectorBackend.registerEnum(&quot;DOMDebugger.DOMBreakpointType&quot;, {SubtreeModified: &quot;subtree-modified&quot;, AttributeModified: &quot;attribute-modified&quot;, NodeRemoved: &quot;node-removed&quot;});
-InspectorBackend.registerCommand(&quot;DOMDebugger.setDOMBreakpoint&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}, {&quot;name&quot;: &quot;type&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeDOMBreakpoint&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}, {&quot;name&quot;: &quot;type&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setEventListenerBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeEventListenerBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setInstrumentationBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeInstrumentationBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setXHRBreakpoint&quot;, [{&quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeXHRBreakpoint&quot;, [{&quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.activateDomain(&quot;DOMDebugger&quot;, &quot;web&quot;);
-
</del><span class="cx"> // DOMStorage.
</span><span class="cx"> InspectorBackend.registerDOMStorageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, &quot;DOMStorage&quot;);
</span><span class="cx"> InspectorBackend.registerEvent(&quot;DOMStorage.domStorageItemsCleared&quot;, [&quot;storageId&quot;]);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceProtocolLegacy103InspectorBackendCommandsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -150,18 +150,6 @@
</span><span class="cx"> InspectorBackend.registerCommand(&quot;DOM.focus&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}], []);
</span><span class="cx"> InspectorBackend.activateDomain(&quot;DOM&quot;, &quot;web&quot;);
</span><span class="cx"> 
</span><del>-// DOMDebugger.
-InspectorBackend.registerEnum(&quot;DOMDebugger.DOMBreakpointType&quot;, {SubtreeModified: &quot;subtree-modified&quot;, AttributeModified: &quot;attribute-modified&quot;, NodeRemoved: &quot;node-removed&quot;});
-InspectorBackend.registerCommand(&quot;DOMDebugger.setDOMBreakpoint&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}, {&quot;name&quot;: &quot;type&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeDOMBreakpoint&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}, {&quot;name&quot;: &quot;type&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setEventListenerBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeEventListenerBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setInstrumentationBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeInstrumentationBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setXHRBreakpoint&quot;, [{&quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeXHRBreakpoint&quot;, [{&quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.activateDomain(&quot;DOMDebugger&quot;, &quot;web&quot;);
-
</del><span class="cx"> // DOMStorage.
</span><span class="cx"> InspectorBackend.registerDOMStorageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, &quot;DOMStorage&quot;);
</span><span class="cx"> InspectorBackend.registerEvent(&quot;DOMStorage.domStorageItemsCleared&quot;, [&quot;storageId&quot;]);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceProtocolLegacy70InspectorBackendCommandsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/7.0/InspectorBackendCommands.js (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/7.0/InspectorBackendCommands.js        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/7.0/InspectorBackendCommands.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -279,18 +279,6 @@
</span><span class="cx"> InspectorBackend.registerCommand(&quot;Debugger.setVariableValue&quot;, [{&quot;name&quot;: &quot;scopeNumber&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}, {&quot;name&quot;: &quot;variableName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}, {&quot;name&quot;: &quot;newValue&quot;, &quot;type&quot;: &quot;object&quot;, &quot;optional&quot;: false}, {&quot;name&quot;: &quot;callFrameId&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: true}, {&quot;name&quot;: &quot;functionObjectId&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: true}], []);
</span><span class="cx"> InspectorBackend.activateDomain(&quot;Debugger&quot;);
</span><span class="cx"> 
</span><del>-// DOMDebugger.
-InspectorBackend.registerEnum(&quot;DOMDebugger.DOMBreakpointType&quot;, {SubtreeModified: &quot;subtree-modified&quot;, AttributeModified: &quot;attribute-modified&quot;, NodeRemoved: &quot;node-removed&quot;});
-InspectorBackend.registerCommand(&quot;DOMDebugger.setDOMBreakpoint&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}, {&quot;name&quot;: &quot;type&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeDOMBreakpoint&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}, {&quot;name&quot;: &quot;type&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setEventListenerBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeEventListenerBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setInstrumentationBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeInstrumentationBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setXHRBreakpoint&quot;, [{&quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeXHRBreakpoint&quot;, [{&quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.activateDomain(&quot;DOMDebugger&quot;);
-
</del><span class="cx"> // Profiler.
</span><span class="cx"> InspectorBackend.registerProfilerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, &quot;Profiler&quot;);
</span><span class="cx"> InspectorBackend.registerEnum(&quot;Profiler.ProfileHeaderTypeId&quot;, {CPU: &quot;CPU&quot;, CSS: &quot;CSS&quot;});
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceProtocolLegacy80InspectorBackendCommandsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -213,18 +213,6 @@
</span><span class="cx"> InspectorBackend.registerCommand(&quot;DOM.focus&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}], []);
</span><span class="cx"> InspectorBackend.activateDomain(&quot;DOM&quot;, &quot;web&quot;);
</span><span class="cx"> 
</span><del>-// DOMDebugger.
-InspectorBackend.registerEnum(&quot;DOMDebugger.DOMBreakpointType&quot;, {SubtreeModified: &quot;subtree-modified&quot;, AttributeModified: &quot;attribute-modified&quot;, NodeRemoved: &quot;node-removed&quot;});
-InspectorBackend.registerCommand(&quot;DOMDebugger.setDOMBreakpoint&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}, {&quot;name&quot;: &quot;type&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeDOMBreakpoint&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}, {&quot;name&quot;: &quot;type&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setEventListenerBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeEventListenerBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setInstrumentationBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeInstrumentationBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setXHRBreakpoint&quot;, [{&quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeXHRBreakpoint&quot;, [{&quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.activateDomain(&quot;DOMDebugger&quot;, &quot;web&quot;);
-
</del><span class="cx"> // DOMStorage.
</span><span class="cx"> InspectorBackend.registerDOMStorageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, &quot;DOMStorage&quot;);
</span><span class="cx"> InspectorBackend.registerEvent(&quot;DOMStorage.domStorageItemsCleared&quot;, [&quot;storageId&quot;]);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceProtocolLegacy90InspectorBackendCommandsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -137,18 +137,6 @@
</span><span class="cx"> InspectorBackend.registerCommand(&quot;DOM.focus&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}], []);
</span><span class="cx"> InspectorBackend.activateDomain(&quot;DOM&quot;, &quot;web&quot;);
</span><span class="cx"> 
</span><del>-// DOMDebugger.
-InspectorBackend.registerEnum(&quot;DOMDebugger.DOMBreakpointType&quot;, {SubtreeModified: &quot;subtree-modified&quot;, AttributeModified: &quot;attribute-modified&quot;, NodeRemoved: &quot;node-removed&quot;});
-InspectorBackend.registerCommand(&quot;DOMDebugger.setDOMBreakpoint&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}, {&quot;name&quot;: &quot;type&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeDOMBreakpoint&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}, {&quot;name&quot;: &quot;type&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setEventListenerBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeEventListenerBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setInstrumentationBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeInstrumentationBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setXHRBreakpoint&quot;, [{&quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeXHRBreakpoint&quot;, [{&quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.activateDomain(&quot;DOMDebugger&quot;, &quot;web&quot;);
-
</del><span class="cx"> // DOMStorage.
</span><span class="cx"> InspectorBackend.registerDOMStorageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, &quot;DOMStorage&quot;);
</span><span class="cx"> InspectorBackend.registerEvent(&quot;DOMStorage.domStorageItemsCleared&quot;, [&quot;storageId&quot;]);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceProtocolLegacy93InspectorBackendCommandsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -144,18 +144,6 @@
</span><span class="cx"> InspectorBackend.registerCommand(&quot;DOM.focus&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}], []);
</span><span class="cx"> InspectorBackend.activateDomain(&quot;DOM&quot;, &quot;web&quot;);
</span><span class="cx"> 
</span><del>-// DOMDebugger.
-InspectorBackend.registerEnum(&quot;DOMDebugger.DOMBreakpointType&quot;, {SubtreeModified: &quot;subtree-modified&quot;, AttributeModified: &quot;attribute-modified&quot;, NodeRemoved: &quot;node-removed&quot;});
-InspectorBackend.registerCommand(&quot;DOMDebugger.setDOMBreakpoint&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}, {&quot;name&quot;: &quot;type&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeDOMBreakpoint&quot;, [{&quot;name&quot;: &quot;nodeId&quot;, &quot;type&quot;: &quot;number&quot;, &quot;optional&quot;: false}, {&quot;name&quot;: &quot;type&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setEventListenerBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeEventListenerBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setInstrumentationBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeInstrumentationBreakpoint&quot;, [{&quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.setXHRBreakpoint&quot;, [{&quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.registerCommand(&quot;DOMDebugger.removeXHRBreakpoint&quot;, [{&quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: false}], []);
-InspectorBackend.activateDomain(&quot;DOMDebugger&quot;, &quot;web&quot;);
-
</del><span class="cx"> // DOMStorage.
</span><span class="cx"> InspectorBackend.registerDOMStorageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, &quot;DOMStorage&quot;);
</span><span class="cx"> InspectorBackend.registerEvent(&quot;DOMStorage.domStorageItemsCleared&quot;, [&quot;storageId&quot;]);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTestTestjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Test/Test.js (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Test/Test.js        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Test/Test.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -68,6 +68,7 @@
</span><span class="cx">     this.probeManager = new WebInspector.ProbeManager;
</span><span class="cx">     this.workerManager = new WebInspector.WorkerManager;
</span><span class="cx">     this.replayManager = new WebInspector.ReplayManager;
</span><ins>+    this.domDebuggerManager = new WebInspector.DOMDebuggerManager;
</ins><span class="cx"> 
</span><span class="cx">     document.addEventListener(&quot;DOMContentLoaded&quot;, this.contentLoaded);
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTesthtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Test.html (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Test.html        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Test.html        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -112,6 +112,7 @@
</span><span class="cx">     &lt;script src=&quot;Models/ConsoleCommandResultMessage.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Models/ContentFlow.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Models/CookieStorageObject.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;Models/DOMBreakpoint.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;Models/DOMNode.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Models/DOMNodeStyles.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Models/DOMStorageObject.js&quot;&gt;&lt;/script&gt;
</span><span class="lines">@@ -183,6 +184,7 @@
</span><span class="cx"> 
</span><span class="cx">     &lt;script src=&quot;Controllers/BreakpointLogMessageLexer.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/CSSStyleManager.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;Controllers/DOMDebuggerManager.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;Controllers/DOMTreeManager.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/DebuggerManager.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/FrameResourceManager.js&quot;&gt;&lt;/script&gt;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -113,6 +113,19 @@
</span><span class="cx">             return resultView;
</span><span class="cx">         }
</span><span class="cx"> 
</span><ins>+        if (representedObject instanceof WebInspector.DOMNode) {
+            if (representedObject.frame) {
+                let resultView = WebInspector.ContentView.createFromRepresentedObject(representedObject.frame, extraArguments);
+                resultView.restoreFromCookie({nodeToSelect: representedObject});
+                return resultView;
+            }
+        }
+
+        if (representedObject instanceof WebInspector.DOMBreakpoint) {
+            if (representedObject.domNode)
+                return WebInspector.ContentView.createFromRepresentedObject(representedObject.domNode, extraArguments);
+        }
+
</ins><span class="cx">         if (representedObject instanceof WebInspector.SourceCodeSearchMatchObject) {
</span><span class="cx">             var resultView;
</span><span class="cx">             if (representedObject.sourceCode instanceof WebInspector.Resource)
</span><span class="lines">@@ -196,6 +209,16 @@
</span><span class="cx">                 return representedObject.sourceCodeLocation.displaySourceCode;
</span><span class="cx">         }
</span><span class="cx"> 
</span><ins>+        if (representedObject instanceof WebInspector.DOMBreakpoint) {
+            if (representedObject.domNode)
+                return WebInspector.ContentView.resolvedRepresentedObjectForRepresentedObject(representedObject.domNode);
+        }
+
+        if (representedObject instanceof WebInspector.DOMNode) {
+            if (representedObject.frame)
+                return WebInspector.ContentView.resolvedRepresentedObjectForRepresentedObject(representedObject.frame);
+        }
+
</ins><span class="cx">         if (representedObject instanceof WebInspector.DOMSearchMatchObject)
</span><span class="cx">             return WebInspector.frameResourceManager.mainFrame.domTree;
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMBreakpointTreeElementcssfromrev213625trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeContentViewcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.css (from rev 213625, trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css) (0 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.css                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.css        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -0,0 +1,43 @@
</span><ins>+/*
+ * Copyright (C) 2017 Apple 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.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.item.dom-breakpoint .icon {
+    content: url(../Images/ResultLine.svg);
+}
+
+.item.dom-breakpoint.breakpoint-paused-icon .icon {
+    content: url(../Images/PausedBreakpoint.svg);
+}
+
+.item.dom-breakpoint .status img {
+    content: url(../Images/BreakpointButton.svg);
+    width: 21px;
+    height: 12px;
+    margin-top: 3px;
+}
+
+.item.dom-breakpoint .status &gt; img.disabled {
+    opacity: 0.35;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMBreakpointTreeElementjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js (0 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -0,0 +1,150 @@
</span><ins>+/*
+ * Copyright (C) 2017 Apple 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.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMBreakpointTreeElement = class DOMBreakpointTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(breakpoint, className, title)
+    {
+        console.assert(breakpoint instanceof WebInspector.DOMBreakpoint);
+
+        if (!className)
+            className = WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName;
+
+        if (!title)
+            title = WebInspector.DOMBreakpointTreeElement.displayNameForType(breakpoint.type);
+
+        super([&quot;dom-breakpoint&quot;, className], title, null, breakpoint);
+
+        this._statusImageElement = document.createElement(&quot;img&quot;);
+        this._statusImageElement.classList.add(&quot;status-image&quot;);
+        this.status = this._statusImageElement;
+
+        breakpoint.addEventListener(WebInspector.DOMBreakpoint.Event.DisabledStateDidChange, this._updateStatus, this);
+
+        this._updateStatus();
+    }
+
+    // Static
+
+    static displayNameForType(type)
+    {
+        switch (type) {
+        case WebInspector.DOMBreakpoint.Type.SubtreeModified:
+            return WebInspector.UIString(&quot;Subtree Modified&quot;);
+        case WebInspector.DOMBreakpoint.Type.AttributeModified:
+            return WebInspector.UIString(&quot;Attribute Modified&quot;);
+        case WebInspector.DOMBreakpoint.Type.NodeRemoved:
+            return WebInspector.UIString(&quot;Node Removed&quot;);
+        default:
+            console.error(&quot;Unexpected DOM breakpoint type: &quot; + type);
+            return null;
+        }
+    }
+
+    // Protected
+
+    onattach()
+    {
+        super.onattach();
+
+        this._boundStatusImageElementClicked = this._statusImageElementClicked.bind(this);
+        this._boundStatusImageElementFocused = this._statusImageElementFocused.bind(this);
+        this._boundStatusImageElementMouseDown = this._statusImageElementMouseDown.bind(this);
+
+        this._statusImageElement.addEventListener(&quot;click&quot;, this._boundStatusImageElementClicked);
+        this._statusImageElement.addEventListener(&quot;focus&quot;, this._boundStatusImageElementFocused);
+        this._statusImageElement.addEventListener(&quot;mousedown&quot;, this._boundStatusImageElementMouseDown);
+    }
+
+    ondetach()
+    {
+        this._statusImageElement.removeEventListener(&quot;click&quot;, this._boundStatusImageElementClicked);
+        this._statusImageElement.removeEventListener(&quot;focus&quot;, this._boundStatusImageElementFocused);
+        this._statusImageElement.removeEventListener(&quot;mousedown&quot;, this._boundStatusImageElementMouseDown);
+
+        this._boundStatusImageElementClicked = null;
+        this._boundStatusImageElementFocused = null;
+        this._boundStatusImageElementMouseDown = null;
+    }
+
+    ondelete()
+    {
+        WebInspector.domDebuggerManager.removeDOMBreakpoint(this.representedObject);
+        return true;
+    }
+
+    onenter()
+    {
+        this._toggleBreakpoint();
+        return true;
+    }
+
+    onspace()
+    {
+        this._toggleBreakpoint();
+        return true;
+    }
+
+    populateContextMenu(contextMenu, event)
+    {
+        let breakpoint = this.representedObject;
+        let label = breakpoint.disabled ? WebInspector.UIString(&quot;Enable Breakpoint&quot;) : WebInspector.UIString(&quot;Disable Breakpoint&quot;);
+        contextMenu.appendItem(label, this._toggleBreakpoint.bind(this));
+
+        contextMenu.appendSeparator();
+        contextMenu.appendItem(WebInspector.UIString(&quot;Delete Breakpoint&quot;), function() {
+            WebInspector.domDebuggerManager.removeDOMBreakpoint(breakpoint);
+        });
+    }
+
+    // Private
+
+    _statusImageElementClicked(event)
+    {
+        this._toggleBreakpoint();
+    }
+
+    _statusImageElementFocused(event)
+    {
+        // Prevent tree outline focus.
+        event.stopPropagation();
+    }
+
+    _statusImageElementMouseDown(event)
+    {
+        // Prevent tree element selection.
+        event.stopPropagation();
+    }
+
+    _toggleBreakpoint()
+    {
+        this.representedObject.disabled = !this.representedObject.disabled;
+    }
+
+    _updateStatus()
+    {
+        this._statusImageElement.classList.toggle(&quot;disabled&quot;, this.representedObject.disabled);
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMNodeTreeElementjsfromrev213625trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeContentViewcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeTreeElement.js (from rev 213625, trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css) (0 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeTreeElement.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeTreeElement.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+/*
+ * Copyright (C) 2017 Apple 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.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMNodeTreeElement = class DOMNodeTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(domNode)
+    {
+        console.assert(domNode instanceof WebInspector.DOMNode);
+
+        super(&quot;dom-node&quot;, domNode.displayName, null, domNode, true);
+    }
+
+    // Protected
+
+    ondelete()
+    {
+        let breakpoints = WebInspector.domDebuggerManager.domBreakpointsForNode(this.representedObject);
+        breakpoints.forEach(WebInspector.domDebuggerManager.removeDOMBreakpoint);
+        return true;
+    }
+
+    populateContextMenu(contextMenu, event)
+    {
+        contextMenu.appendSeparator();
+
+        const allowEditing = true;
+        WebInspector.DOMBreakpointTreeController.appendBreakpointContextMenuItems(contextMenu, this.representedObject, allowEditing);
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -26,3 +26,57 @@
</span><span class="cx"> .content-view.dom-tree {
</span><span class="cx">     overflow: auto;
</span><span class="cx"> }
</span><ins>+
+.content-view.dom-tree.show-gutter .tree-outline.dom {
+    --gutter-padding-start: 13px;
+}
+
+body[dir=ltr] .content-view.dom-tree.show-gutter .tree-outline.dom {
+    padding-left: var(--gutter-padding-start);
+}
+
+body[dir=rtl] .content-view.dom-tree.show-gutter .tree-outline.dom {
+    padding-right: var(--gutter-padding-start);
+}
+
+.content-view.dom-tree .tree-outline.dom li .status-image {
+    position: absolute;
+    height: 13px;
+
+    --status-image-position-start: 0;
+}
+
+body[dir=ltr] .content-view.dom-tree .tree-outline.dom li .status-image {
+    left: var(--status-image-position-start);
+}
+
+body[dir=rtl] .content-view.dom-tree .tree-outline.dom li .status-image {
+    transform: scaleX(-1);
+    right: var(--status-image-position-start);
+}
+
+.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint {
+    width: 15px;
+    fill: var(--breakpoint-fill-color);
+    stroke: var(--breakpoint-stroke-color);
+    stroke-width: 1px;
+}
+
+body:not(.window-inactive) .content-view.dom-tree .tree-outline.dom:focus li.selected .status-image.breakpoint {
+    stroke: white;
+}
+
+.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.disabled {
+    fill: var(--breakpoint-disabled-fill-color);
+    stroke: var(--breakpoint-disabled-stroke-color);
+}
+
+.content-view.dom-tree .tree-outline.dom.breakpoints-disabled li .status-image.breakpoint {
+    fill: var(--breakpoint-unresolved-fill-color);
+    stroke: var(--breakpoint-unresolved-stroke-color);
+}
+
+.content-view.dom-tree .tree-outline.dom.breakpoints-disabled li .status-image.breakpoint.disabled {
+    fill: var(--breakpoint-unresolved-disabled-fill-color);
+    stroke: var(--breakpoint-unresolved-disabled-stroke-color);
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -55,6 +55,7 @@
</span><span class="cx">         this.element.addEventListener(&quot;click&quot;, this._mouseWasClicked.bind(this), false);
</span><span class="cx"> 
</span><span class="cx">         this._domTreeOutline = new WebInspector.DOMTreeOutline(true, true, true);
</span><ins>+        this._domTreeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementAdded, this._domTreeElementAdded, this);
</ins><span class="cx">         this._domTreeOutline.addEventListener(WebInspector.DOMTreeOutline.Event.SelectedNodeChanged, this._selectedNodeDidChange, this);
</span><span class="cx">         this._domTreeOutline.wireToDomAgent();
</span><span class="cx">         this._domTreeOutline.editable = true;
</span><span class="lines">@@ -67,6 +68,21 @@
</span><span class="cx">         this._lastSelectedNodePathSetting = new WebInspector.Setting(&quot;last-selected-node-path&quot;, null);
</span><span class="cx"> 
</span><span class="cx">         this._numberOfSearchResults = null;
</span><ins>+
+        this._breakpointGutterEnabled = false;
+        this._pendingBreakpointNodeIdentifiers = new Set;
+
+        if (WebInspector.domDebuggerManager.supported) {
+            WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointsEnabledDidChange, this._breakpointsEnabledDidChange, this);
+
+            WebInspector.domDebuggerManager.addEventListener(WebInspector.DOMDebuggerManager.Event.DOMBreakpointAdded, this._domBreakpointAddedOrRemoved, this);
+            WebInspector.domDebuggerManager.addEventListener(WebInspector.DOMDebuggerManager.Event.DOMBreakpointRemoved, this._domBreakpointAddedOrRemoved, this);
+
+            WebInspector.DOMBreakpoint.addEventListener(WebInspector.DOMBreakpoint.Event.DisabledStateDidChange, this._domBreakpointDisabledStateDidChange, this);
+            WebInspector.DOMBreakpoint.addEventListener(WebInspector.DOMBreakpoint.Event.ResolvedStateDidChange, this._domBreakpointResolvedStateDidChange, this);
+
+            this._breakpointsEnabledDidChange();
+        }
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="lines">@@ -86,6 +102,20 @@
</span><span class="cx">         return [this.element];
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    get breakpointGutterEnabled()
+    {
+        return this._breakpointGutterEnabled;
+    }
+
+    set breakpointGutterEnabled(flag)
+    {
+        if (this._breakpointGutterEnabled === flag)
+            return;
+
+        this._breakpointGutterEnabled = flag;
+        this.element.classList.toggle(&quot;show-gutter&quot;, this._breakpointGutterEnabled);
+    }
+
</ins><span class="cx">     shown()
</span><span class="cx">     {
</span><span class="cx">         super.shown();
</span><span class="lines">@@ -92,6 +122,11 @@
</span><span class="cx"> 
</span><span class="cx">         this._domTreeOutline.setVisible(true, WebInspector.isConsoleFocused());
</span><span class="cx">         this._updateCompositingBordersButtonToMatchPageSettings();
</span><ins>+
+        if (!this._domTreeOutline.rootDOMNode)
+            return;
+
+        this._restoreBreakpointsAfterUpdate();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     hidden()
</span><span class="lines">@@ -108,9 +143,13 @@
</span><span class="cx"> 
</span><span class="cx">         WebInspector.showPaintRectsSetting.removeEventListener(null, null, this);
</span><span class="cx">         WebInspector.showShadowDOMSetting.removeEventListener(null, null, this);
</span><ins>+        WebInspector.debuggerManager.removeEventListener(null, null, this);
</ins><span class="cx">         WebInspector.domTreeManager.removeEventListener(null, null, this);
</span><ins>+        WebInspector.domDebuggerManager.removeEventListener(null, null, this);
+        WebInspector.DOMBreakpoint.removeEventListener(null, null, this);
</ins><span class="cx"> 
</span><span class="cx">         this._domTreeOutline.close();
</span><ins>+        this._pendingBreakpointNodeIdentifiers.clear();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     get selectionPathComponents()
</span><span class="lines">@@ -368,6 +407,23 @@
</span><span class="cx">             selectNode.call(this);
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    _domTreeElementAdded(event)
+    {
+        if (!this._pendingBreakpointNodeIdentifiers.size)
+            return;
+
+        let treeElement = event.data.element;
+        let node = treeElement.representedObject;
+        console.assert(node instanceof WebInspector.DOMNode);
+        if (!(node instanceof WebInspector.DOMNode))
+            return;
+
+        if (!this._pendingBreakpointNodeIdentifiers.delete(node.id))
+            return;
+
+        this._updateBreakpointStatus(node.id);
+    }
+
</ins><span class="cx">     _selectedNodeDidChange(event)
</span><span class="cx">     {
</span><span class="cx">         var selectedDOMNode = this._domTreeOutline.selectedDOMNode();
</span><span class="lines">@@ -546,4 +602,67 @@
</span><span class="cx"> 
</span><span class="cx">         delete this._searchResultNodes;
</span><span class="cx">     }
</span><ins>+
+    _domBreakpointAddedOrRemoved(event)
+    {
+        let breakpoint = event.data.breakpoint;
+        this._updateBreakpointStatus(breakpoint.domNodeIdentifier);
+    }
+
+    _domBreakpointDisabledStateDidChange(event)
+    {
+        let breakpoint = event.target;
+        this._updateBreakpointStatus(breakpoint.domNodeIdentifier);
+    }
+
+    _domBreakpointResolvedStateDidChange(event)
+    {
+        let breakpoint = event.target;
+        let nodeIdentifier = breakpoint.domNodeIdentifier || event.data.oldNodeIdentifier;
+        this._updateBreakpointStatus(nodeIdentifier);
+    }
+
+    _updateBreakpointStatus(nodeIdentifier)
+    {
+        let domNode = WebInspector.domTreeManager.nodeForId(nodeIdentifier);
+        if (!domNode)
+            return;
+
+        let treeElement = this._domTreeOutline.findTreeElement(domNode);
+        if (!treeElement) {
+            this._pendingBreakpointNodeIdentifiers.add(nodeIdentifier);
+            return;
+        }
+
+        let breakpoints = WebInspector.domDebuggerManager.domBreakpointsForNode(domNode);
+        if (!breakpoints.length) {
+            treeElement.breakpointStatus = WebInspector.DOMTreeElement.BreakpointStatus.None;
+            return;
+        }
+
+        this.breakpointGutterEnabled = true;
+
+        let disabled = breakpoints.some((item) =&gt; item.disabled);
+        treeElement.breakpointStatus = disabled ? WebInspector.DOMTreeElement.BreakpointStatus.DisabledBreakpoint : WebInspector.DOMTreeElement.BreakpointStatus.Breakpoint;
+    }
+
+    _restoreBreakpointsAfterUpdate()
+    {
+        this._pendingBreakpointNodeIdentifiers.clear();
+
+        this.breakpointGutterEnabled = false;
+
+        let updatedNodes = new Set;
+        for (let breakpoint of WebInspector.domDebuggerManager.domBreakpoints) {
+            if (updatedNodes.has(breakpoint.domNodeIdentifier))
+                continue;
+
+            this._updateBreakpointStatus(breakpoint.domNodeIdentifier);
+        }
+    }
+
+    _breakpointsEnabledDidChange(event)
+    {
+        this._domTreeOutline.element.classList.toggle(&quot;breakpoints-disabled&quot;, !WebInspector.debuggerManager.breakpointsEnabled);
+    }
</ins><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -41,6 +41,7 @@
</span><span class="cx">             this._canAddAttributes = true;
</span><span class="cx">         this._searchQuery = null;
</span><span class="cx">         this._expandedChildrenLimit = WebInspector.DOMTreeElement.InitialChildrenLimit;
</span><ins>+        this._breakpointStatus = WebInspector.DOMTreeElement.BreakpointStatus.None;
</ins><span class="cx"> 
</span><span class="cx">         this._recentlyModifiedAttributes = [];
</span><span class="cx">         this._boundNodeChangedAnimationEnd = this._nodeChangedAnimationEnd.bind(this);
</span><span class="lines">@@ -64,6 +65,20 @@
</span><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="cx"> 
</span><ins>+    get breakpointStatus()
+    {
+        return this._breakpointStatus;
+    }
+
+    set breakpointStatus(status)
+    {
+        if (this._breakpointStatus === status)
+            return;
+
+        this._breakpointStatus = status;
+        this._updateBreakpointStatus();
+    }
+
</ins><span class="cx">     isCloseTag()
</span><span class="cx">     {
</span><span class="cx">         return this._elementCloseTag;
</span><span class="lines">@@ -744,6 +759,13 @@
</span><span class="cx">             contextMenu.appendSeparator();
</span><span class="cx">             contextMenu.appendItem(WebInspector.UIString(&quot;Jump to Definition&quot;), this._showCustomElementDefinition.bind(this));
</span><span class="cx">         }
</span><ins>+
+        if (node.nodeType() === Node.ELEMENT_NODE) {
+            contextMenu.appendSeparator();
+
+            const allowEditing = false;
+            WebInspector.DOMBreakpointTreeController.appendBreakpointContextMenuItems(contextMenu, node, allowEditing);
+        }
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _startEditing()
</span><span class="lines">@@ -1146,6 +1168,7 @@
</span><span class="cx">         this._selectionElement = null;
</span><span class="cx">         this.updateSelectionArea();
</span><span class="cx">         this._highlightSearchResults();
</span><ins>+        this._updateBreakpointStatus();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _buildAttributeDOM(parentElement, name, value, node)
</span><span class="lines">@@ -1642,6 +1665,39 @@
</span><span class="cx">         if (event.type === &quot;dragstart&quot; &amp;&amp; this._editing)
</span><span class="cx">             event.preventDefault();
</span><span class="cx">     }
</span><ins>+
+    _updateBreakpointStatus()
+    {
+        let listItemElement = this.listItemElement;
+        if (!listItemElement)
+            return;
+
+        if (this._breakpointStatus === WebInspector.DOMTreeElement.BreakpointStatus.None) {
+            if (this._statusImageElement)
+                this._statusImageElement.remove();
+            return;
+        }
+
+        if (!this._statusImageElement) {
+            this._statusImageElement = useSVGSymbol(&quot;Images/DOMBreakpoint.svg&quot;, &quot;status-image&quot;);
+            this._statusImageElement.classList.add(&quot;breakpoint&quot;);
+            this._statusImageElement.addEventListener(&quot;contextmenu&quot;, this._statusImageContextmenu.bind(this));
+            this._statusImageElement.addEventListener(&quot;mousedown&quot;, (event) =&gt; { event.stopPropagation(); });
+        }
+
+        this.listItemElement.insertBefore(this._statusImageElement, this.listItemElement.firstChild);
+
+        let disabled = this._breakpointStatus === WebInspector.DOMTreeElement.BreakpointStatus.DisabledBreakpoint;
+        this._statusImageElement.classList.toggle(&quot;disabled&quot;, disabled);
+    }
+
+    _statusImageContextmenu(event)
+    {
+        const allowEditing = true;
+
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+        WebInspector.DOMBreakpointTreeController.appendBreakpointContextMenuItems(contextMenu, this.representedObject, allowEditing);
+    }
</ins><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> WebInspector.DOMTreeElement.InitialChildrenLimit = 500;
</span><span class="lines">@@ -1664,5 +1720,11 @@
</span><span class="cx">     Attribute: &quot;dom-tree-element-change-type-attribute&quot;
</span><span class="cx"> };
</span><span class="cx"> 
</span><ins>+WebInspector.DOMTreeElement.BreakpointStatus = {
+    None: Symbol(&quot;none&quot;),
+    Breakpoint: Symbol(&quot;breakpoint&quot;),
+    DisabledBreakpoint: Symbol(&quot;disabled-breakpoint&quot;),
+};
+
</ins><span class="cx"> WebInspector.DOMTreeElement.SearchHighlightStyleClassName = &quot;search-highlight&quot;;
</span><span class="cx"> WebInspector.DOMTreeElement.BouncyHighlightStyleClassName = &quot;bouncy-highlight&quot;;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDebuggerSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -94,3 +94,12 @@
</span><span class="cx"> .sidebar &gt; .panel.navigation.debugger .details-section.scripts:not(.collapsed) {
</span><span class="cx">     border-bottom: none;
</span><span class="cx"> }
</span><ins>+
+.sidebar &gt; .panel.navigation.debugger .details-section.dom-breakpoints .item.dom-node .titles {
+    top: 3px;
+    font-family: Menlo, monospace;
+}
+
+.sidebar &gt; .panel.navigation.debugger .details-section.dom-breakpoints .item.dom-node .icon {
+    content: url(../Images/DOMElement.svg);
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDebuggerSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -166,6 +166,21 @@
</span><span class="cx">         if (DebuggerAgent.setPauseOnAssertions)
</span><span class="cx">             this._breakpointsContentTreeOutline.appendChild(this._assertionsBreakpointTreeElement);
</span><span class="cx"> 
</span><ins>+        if (WebInspector.domDebuggerManager.supported) {
+            this._domBreakpointsContentTreeOutline = this.createContentTreeOutline(true);
+            this._domBreakpointsContentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementAdded, this._domBreakpointAddedOrRemoved, this);
+            this._domBreakpointsContentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementRemoved, this._domBreakpointAddedOrRemoved, this);
+            this._domBreakpointTreeController = new WebInspector.DOMBreakpointTreeController(this._domBreakpointsContentTreeOutline);
+
+            this._domBreakpointsRow = new WebInspector.DetailsSectionRow(WebInspector.UIString(&quot;No Breakpoints&quot;));
+            this._domBreakpointsRow.element.appendChild(this._domBreakpointsContentTreeOutline.element);
+            this._domBreakpointsRow.showEmptyMessage();
+
+            let domBreakpointsGroup = new WebInspector.DetailsSectionGroup([this._domBreakpointsRow]);
+            let domBreakpointsSection = new WebInspector.DetailsSection(&quot;dom-breakpoints&quot;, WebInspector.UIString(&quot;DOM Breakpoints&quot;), [domBreakpointsGroup]);
+            this.contentView.element.appendChild(domBreakpointsSection.element);
+        }
+
</ins><span class="cx">         this._scriptsContentTreeOutline = this.createContentTreeOutline();
</span><span class="cx">         this._scriptsContentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
</span><span class="cx"> 
</span><span class="lines">@@ -233,6 +248,9 @@
</span><span class="cx">     {
</span><span class="cx">         super.closed();
</span><span class="cx"> 
</span><ins>+        this._domBreakpointTreeController.disconnect();
+        this._domBreakpointTreeController = null;
+
</ins><span class="cx">         WebInspector.Frame.removeEventListener(null, null, this);
</span><span class="cx">         WebInspector.debuggerManager.removeEventListener(null, null, this);
</span><span class="cx">         WebInspector.Breakpoint.removeEventListener(null, null, this);
</span><span class="lines">@@ -912,6 +930,35 @@
</span><span class="cx">             this._pauseReasonGroup.rows = [this._pauseReasonTextRow];
</span><span class="cx">             return true;
</span><span class="cx"> 
</span><ins>+        case WebInspector.DebuggerManager.PauseReason.DOM:
+            console.assert(WebInspector.domDebuggerManager.supported);
+            console.assert(pauseData, &quot;Expected DOM breakpoint data, but found none.&quot;);
+            if (pauseData &amp;&amp; pauseData.nodeId) {
+                let domNode = WebInspector.domTreeManager.nodeForId(pauseData.nodeId);
+                let domBreakpoints = WebInspector.domDebuggerManager.domBreakpointsForNode(domNode);
+                let domBreakpoint;
+                for (let breakpoint of domBreakpoints) {
+                    if (breakpoint.type === pauseData.type) {
+                        domBreakpoint = breakpoint;
+                        break;
+                    }
+                }
+
+                if (!domBreakpoint)
+                    return;
+
+                this._pauseReasonTreeOutline = this.createContentTreeOutline(true, true);
+
+                let domBreakpointTreeElement = new WebInspector.DOMBreakpointTreeElement(domBreakpoint, WebInspector.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName, WebInspector.UIString(&quot;Triggered DOM Breakpoint&quot;));
+                let domBreakpointDetailsSection = new WebInspector.DetailsSectionRow;
+                this._pauseReasonTreeOutline.appendChild(domBreakpointTreeElement);
+                domBreakpointDetailsSection.element.appendChild(this._pauseReasonTreeOutline.element);
+
+                this._pauseReasonGroup.rows = [domBreakpointDetailsSection];
+                return true;
+            }
+            break;
+
</ins><span class="cx">         case WebInspector.DebuggerManager.PauseReason.Exception:
</span><span class="cx">             console.assert(pauseData, &quot;Expected data with an exception, but found none.&quot;);
</span><span class="cx">             if (pauseData) {
</span><span class="lines">@@ -1006,6 +1053,20 @@
</span><span class="cx"> 
</span><span class="cx">         issueTreeElements.forEach((treeElement) =&gt; treeElement.parent.removeChild(treeElement));
</span><span class="cx">     }
</span><ins>+
+    _domBreakpointAddedOrRemoved(event)
+    {
+        if (!this._domBreakpointsContentTreeOutline.children.length) {
+            this._domBreakpointsRow.showEmptyMessage();
+            return;
+        }
+
+        if (this._domBreakpointsContentTreeOutline.element.parent)
+            return;
+
+        this._domBreakpointsRow.hideEmptyMessage();
+        this._domBreakpointsRow.element.append(this._domBreakpointsContentTreeOutline.element);
+    }
</ins><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> WebInspector.DebuggerSidebarPanel.DebuggerPausedStyleClassName = &quot;paused&quot;;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFrameDOMTreeContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FrameDOMTreeContentView.js (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/FrameDOMTreeContentView.js        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FrameDOMTreeContentView.js        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -69,6 +69,7 @@
</span><span class="cx">             return;
</span><span class="cx">         }
</span><span class="cx"> 
</span><ins>+        this._restoreBreakpointsAfterUpdate();
</ins><span class="cx">         this._restoreSelectedNodeAfterUpdate(this._domTree.frame.url, rootDOMNode.body || rootDOMNode.documentElement || rootDOMNode.firstChild);
</span><span class="cx">     }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVariablescss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -61,6 +61,15 @@
</span><span class="cx">     --text-color-gray-medium: hsl(0, 0%, 50%);
</span><span class="cx">     --error-text-color: hsl(0, 86%, 47%);
</span><span class="cx"> 
</span><ins>+    --breakpoint-fill-color: hsl(212, 45%, 54%);
+    --breakpoint-stroke-color: hsl(212, 45%, 48%);
+    --breakpoint-disabled-fill-color: hsl(212, 40%, 84%);
+    --breakpoint-disabled-stroke-color: hsl(212, 40%, 78%);
+    --breakpoint-unresolved-fill-color: hsl(0, 0%, 60%);
+    --breakpoint-unresolved-stroke-color: hsl(0, 0%, 54%);
+    --breakpoint-unresolved-disabled-fill-color: hsl(0, 0%, 84%);
+    --breakpoint-unresolved-disabled-stroke-color: hsl(0, 0%, 78%);
+
</ins><span class="cx">     --syntax-highlight-number-color: hsl(248, 100%, 40%);
</span><span class="cx">     --syntax-highlight-boolean-color: hsl(309, 85%, 35%);
</span><span class="cx">     --syntax-highlight-string-color: hsl(1, 79%, 42%);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIVersionsInspectoriOS100json"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Versions/Inspector-iOS-10.0.json (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Versions/Inspector-iOS-10.0.json        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/Versions/Inspector-iOS-10.0.json        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -1211,80 +1211,6 @@
</span><span class="cx"> }
</span><span class="cx"> ,
</span><span class="cx"> {
</span><del>-    &quot;domain&quot;: &quot;DOMDebugger&quot;,
-    &quot;description&quot;: &quot;DOM debugging allows setting breakpoints on particular DOM operations and events. JavaScript execution will stop on these operations as if there was a regular breakpoint set.&quot;,
-    &quot;availability&quot;: &quot;web&quot;,
-    &quot;types&quot;: [
-        {
-            &quot;id&quot;: &quot;DOMBreakpointType&quot;,
-            &quot;type&quot;: &quot;string&quot;,
-            &quot;enum&quot;: [&quot;subtree-modified&quot;, &quot;attribute-modified&quot;, &quot;node-removed&quot;],
-            &quot;description&quot;: &quot;DOM breakpoint type.&quot;
-        }
-    ],
-    &quot;commands&quot;: [
-        {
-            &quot;name&quot;: &quot;setDOMBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;nodeId&quot;, &quot;$ref&quot;: &quot;DOM.NodeId&quot;, &quot;description&quot;: &quot;Identifier of the node to set breakpoint on.&quot; },
-                { &quot;name&quot;: &quot;type&quot;, &quot;$ref&quot;: &quot;DOMBreakpointType&quot;, &quot;description&quot;: &quot;Type of the operation to stop upon.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular operation with DOM.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeDOMBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;nodeId&quot;, &quot;$ref&quot;: &quot;DOM.NodeId&quot;, &quot;description&quot;: &quot;Identifier of the node to remove breakpoint from.&quot; },
-                { &quot;name&quot;: &quot;type&quot;, &quot;$ref&quot;: &quot;DOMBreakpointType&quot;, &quot;description&quot;: &quot;Type of the breakpoint to remove.&quot; }
-            ],
-            &quot;description&quot;: &quot;Removes DOM breakpoint that was set using &lt;code&gt;setDOMBreakpoint&lt;/code&gt;.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;setEventListenerBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;DOM Event name to stop on (any DOM event will do).&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular DOM event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeEventListenerBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Event name.&quot; }
-            ],
-            &quot;description&quot;: &quot;Removes breakpoint on particular DOM event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;setInstrumentationBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Instrumentation name to stop on.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular native event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeInstrumentationBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Instrumentation name to stop on.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular native event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;setXHRBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Resource URL substring. All XHRs having this substring in the URL will get stopped upon.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on XMLHttpRequest.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeXHRBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Resource URL substring.&quot; }
-            ],
-            &quot;description&quot;: &quot;Removes breakpoint from XMLHttpRequest.&quot;
-        }
-    ]
-}
-,
-{
</del><span class="cx">     &quot;domain&quot;: &quot;DOMStorage&quot;,
</span><span class="cx">     &quot;description&quot;: &quot;Query and modify DOM storage.&quot;,
</span><span class="cx">     &quot;availability&quot;: &quot;web&quot;,
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIVersionsInspectoriOS103json"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Versions/Inspector-iOS-10.3.json (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Versions/Inspector-iOS-10.3.json        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/Versions/Inspector-iOS-10.3.json        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -1234,80 +1234,6 @@
</span><span class="cx"> }
</span><span class="cx"> ,
</span><span class="cx"> {
</span><del>-    &quot;domain&quot;: &quot;DOMDebugger&quot;,
-    &quot;description&quot;: &quot;DOM debugging allows setting breakpoints on particular DOM operations and events. JavaScript execution will stop on these operations as if there was a regular breakpoint set.&quot;,
-    &quot;availability&quot;: &quot;web&quot;,
-    &quot;types&quot;: [
-        {
-            &quot;id&quot;: &quot;DOMBreakpointType&quot;,
-            &quot;type&quot;: &quot;string&quot;,
-            &quot;enum&quot;: [&quot;subtree-modified&quot;, &quot;attribute-modified&quot;, &quot;node-removed&quot;],
-            &quot;description&quot;: &quot;DOM breakpoint type.&quot;
-        }
-    ],
-    &quot;commands&quot;: [
-        {
-            &quot;name&quot;: &quot;setDOMBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;nodeId&quot;, &quot;$ref&quot;: &quot;DOM.NodeId&quot;, &quot;description&quot;: &quot;Identifier of the node to set breakpoint on.&quot; },
-                { &quot;name&quot;: &quot;type&quot;, &quot;$ref&quot;: &quot;DOMBreakpointType&quot;, &quot;description&quot;: &quot;Type of the operation to stop upon.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular operation with DOM.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeDOMBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;nodeId&quot;, &quot;$ref&quot;: &quot;DOM.NodeId&quot;, &quot;description&quot;: &quot;Identifier of the node to remove breakpoint from.&quot; },
-                { &quot;name&quot;: &quot;type&quot;, &quot;$ref&quot;: &quot;DOMBreakpointType&quot;, &quot;description&quot;: &quot;Type of the breakpoint to remove.&quot; }
-            ],
-            &quot;description&quot;: &quot;Removes DOM breakpoint that was set using &lt;code&gt;setDOMBreakpoint&lt;/code&gt;.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;setEventListenerBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;DOM Event name to stop on (any DOM event will do).&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular DOM event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeEventListenerBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Event name.&quot; }
-            ],
-            &quot;description&quot;: &quot;Removes breakpoint on particular DOM event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;setInstrumentationBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Instrumentation name to stop on.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular native event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeInstrumentationBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Instrumentation name to stop on.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular native event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;setXHRBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Resource URL substring. All XHRs having this substring in the URL will get stopped upon.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on XMLHttpRequest.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeXHRBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Resource URL substring.&quot; }
-            ],
-            &quot;description&quot;: &quot;Removes breakpoint from XMLHttpRequest.&quot;
-        }
-    ]
-}
-,
-{
</del><span class="cx">     &quot;domain&quot;: &quot;DOMStorage&quot;,
</span><span class="cx">     &quot;description&quot;: &quot;Query and modify DOM storage.&quot;,
</span><span class="cx">     &quot;availability&quot;: &quot;web&quot;,
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIVersionsInspectoriOS70json"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Versions/Inspector-iOS-7.0.json (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Versions/Inspector-iOS-7.0.json        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/Versions/Inspector-iOS-7.0.json        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -2402,78 +2402,6 @@
</span><span class="cx">         ]
</span><span class="cx">     },
</span><span class="cx">     {
</span><del>-        &quot;domain&quot;: &quot;DOMDebugger&quot;,
-        &quot;description&quot;: &quot;DOM debugging allows setting breakpoints on particular DOM operations and events. JavaScript execution will stop on these operations as if there was a regular breakpoint set.&quot;,
-        &quot;types&quot;: [
-            {
-                &quot;id&quot;: &quot;DOMBreakpointType&quot;,
-                &quot;type&quot;: &quot;string&quot;,
-                &quot;enum&quot;: [&quot;subtree-modified&quot;, &quot;attribute-modified&quot;, &quot;node-removed&quot;],
-                &quot;description&quot;: &quot;DOM breakpoint type.&quot;
-            }
-        ],
-        &quot;commands&quot;: [
-            {
-                &quot;name&quot;: &quot;setDOMBreakpoint&quot;,
-                &quot;parameters&quot;: [
-                    { &quot;name&quot;: &quot;nodeId&quot;, &quot;$ref&quot;: &quot;DOM.NodeId&quot;, &quot;description&quot;: &quot;Identifier of the node to set breakpoint on.&quot; },
-                    { &quot;name&quot;: &quot;type&quot;, &quot;$ref&quot;: &quot;DOMBreakpointType&quot;, &quot;description&quot;: &quot;Type of the operation to stop upon.&quot; }
-                ],
-                &quot;description&quot;: &quot;Sets breakpoint on particular operation with DOM.&quot;
-            },
-            {
-                &quot;name&quot;: &quot;removeDOMBreakpoint&quot;,
-                &quot;parameters&quot;: [
-                    { &quot;name&quot;: &quot;nodeId&quot;, &quot;$ref&quot;: &quot;DOM.NodeId&quot;, &quot;description&quot;: &quot;Identifier of the node to remove breakpoint from.&quot; },
-                    { &quot;name&quot;: &quot;type&quot;, &quot;$ref&quot;: &quot;DOMBreakpointType&quot;, &quot;description&quot;: &quot;Type of the breakpoint to remove.&quot; }
-                ],
-                &quot;description&quot;: &quot;Removes DOM breakpoint that was set using &lt;code&gt;setDOMBreakpoint&lt;/code&gt;.&quot;
-            },
-            {
-                &quot;name&quot;: &quot;setEventListenerBreakpoint&quot;,
-                &quot;parameters&quot;: [
-                    { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;DOM Event name to stop on (any DOM event will do).&quot; }
-                ],
-                &quot;description&quot;: &quot;Sets breakpoint on particular DOM event.&quot;
-            },
-            {
-                &quot;name&quot;: &quot;removeEventListenerBreakpoint&quot;,
-                &quot;parameters&quot;: [
-                    { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Event name.&quot; }
-                ],
-                &quot;description&quot;: &quot;Removes breakpoint on particular DOM event.&quot;
-            },
-            {
-                &quot;name&quot;: &quot;setInstrumentationBreakpoint&quot;,
-                &quot;parameters&quot;: [
-                    { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Instrumentation name to stop on.&quot; }
-                ],
-                &quot;description&quot;: &quot;Sets breakpoint on particular native event.&quot;
-            },
-            {
-                &quot;name&quot;: &quot;removeInstrumentationBreakpoint&quot;,
-                &quot;parameters&quot;: [
-                    { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Instrumentation name to stop on.&quot; }
-                ],
-                &quot;description&quot;: &quot;Sets breakpoint on particular native event.&quot;
-            },
-            {
-                &quot;name&quot;: &quot;setXHRBreakpoint&quot;,
-                &quot;parameters&quot;: [
-                    { &quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Resource URL substring. All XHRs having this substring in the URL will get stopped upon.&quot; }
-                ],
-                &quot;description&quot;: &quot;Sets breakpoint on XMLHttpRequest.&quot;
-            },
-            {
-                &quot;name&quot;: &quot;removeXHRBreakpoint&quot;,
-                &quot;parameters&quot;: [
-                    { &quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Resource URL substring.&quot; }
-                ],
-                &quot;description&quot;: &quot;Removes breakpoint from XMLHttpRequest.&quot;
-            }
-        ]
-    },
-    {
</del><span class="cx">         &quot;domain&quot;: &quot;Profiler&quot;,
</span><span class="cx">         &quot;types&quot;: [
</span><span class="cx">             {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIVersionsInspectoriOS80json"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Versions/Inspector-iOS-8.0.json (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Versions/Inspector-iOS-8.0.json        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/Versions/Inspector-iOS-8.0.json        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -1796,80 +1796,6 @@
</span><span class="cx"> }
</span><span class="cx"> ,
</span><span class="cx"> {
</span><del>-    &quot;domain&quot;: &quot;DOMDebugger&quot;,
-    &quot;description&quot;: &quot;DOM debugging allows setting breakpoints on particular DOM operations and events. JavaScript execution will stop on these operations as if there was a regular breakpoint set.&quot;,
-    &quot;availability&quot;: &quot;web&quot;,
-    &quot;types&quot;: [
-        {
-            &quot;id&quot;: &quot;DOMBreakpointType&quot;,
-            &quot;type&quot;: &quot;string&quot;,
-            &quot;enum&quot;: [&quot;subtree-modified&quot;, &quot;attribute-modified&quot;, &quot;node-removed&quot;],
-            &quot;description&quot;: &quot;DOM breakpoint type.&quot;
-        }
-    ],
-    &quot;commands&quot;: [
-        {
-            &quot;name&quot;: &quot;setDOMBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;nodeId&quot;, &quot;$ref&quot;: &quot;DOM.NodeId&quot;, &quot;description&quot;: &quot;Identifier of the node to set breakpoint on.&quot; },
-                { &quot;name&quot;: &quot;type&quot;, &quot;$ref&quot;: &quot;DOMBreakpointType&quot;, &quot;description&quot;: &quot;Type of the operation to stop upon.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular operation with DOM.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeDOMBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;nodeId&quot;, &quot;$ref&quot;: &quot;DOM.NodeId&quot;, &quot;description&quot;: &quot;Identifier of the node to remove breakpoint from.&quot; },
-                { &quot;name&quot;: &quot;type&quot;, &quot;$ref&quot;: &quot;DOMBreakpointType&quot;, &quot;description&quot;: &quot;Type of the breakpoint to remove.&quot; }
-            ],
-            &quot;description&quot;: &quot;Removes DOM breakpoint that was set using &lt;code&gt;setDOMBreakpoint&lt;/code&gt;.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;setEventListenerBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;DOM Event name to stop on (any DOM event will do).&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular DOM event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeEventListenerBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Event name.&quot; }
-            ],
-            &quot;description&quot;: &quot;Removes breakpoint on particular DOM event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;setInstrumentationBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Instrumentation name to stop on.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular native event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeInstrumentationBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Instrumentation name to stop on.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular native event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;setXHRBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Resource URL substring. All XHRs having this substring in the URL will get stopped upon.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on XMLHttpRequest.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeXHRBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Resource URL substring.&quot; }
-            ],
-            &quot;description&quot;: &quot;Removes breakpoint from XMLHttpRequest.&quot;
-        }
-    ]
-}
-,
-{
</del><span class="cx">     &quot;domain&quot;: &quot;DOMStorage&quot;,
</span><span class="cx">     &quot;description&quot;: &quot;Query and modify DOM storage.&quot;,
</span><span class="cx">     &quot;availability&quot;: &quot;web&quot;,
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIVersionsInspectoriOS90json"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Versions/Inspector-iOS-9.0.json (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Versions/Inspector-iOS-9.0.json        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/Versions/Inspector-iOS-9.0.json        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -1134,80 +1134,6 @@
</span><span class="cx"> }
</span><span class="cx"> ,
</span><span class="cx"> {
</span><del>-    &quot;domain&quot;: &quot;DOMDebugger&quot;,
-    &quot;description&quot;: &quot;DOM debugging allows setting breakpoints on particular DOM operations and events. JavaScript execution will stop on these operations as if there was a regular breakpoint set.&quot;,
-    &quot;availability&quot;: &quot;web&quot;,
-    &quot;types&quot;: [
-        {
-            &quot;id&quot;: &quot;DOMBreakpointType&quot;,
-            &quot;type&quot;: &quot;string&quot;,
-            &quot;enum&quot;: [&quot;subtree-modified&quot;, &quot;attribute-modified&quot;, &quot;node-removed&quot;],
-            &quot;description&quot;: &quot;DOM breakpoint type.&quot;
-        }
-    ],
-    &quot;commands&quot;: [
-        {
-            &quot;name&quot;: &quot;setDOMBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;nodeId&quot;, &quot;$ref&quot;: &quot;DOM.NodeId&quot;, &quot;description&quot;: &quot;Identifier of the node to set breakpoint on.&quot; },
-                { &quot;name&quot;: &quot;type&quot;, &quot;$ref&quot;: &quot;DOMBreakpointType&quot;, &quot;description&quot;: &quot;Type of the operation to stop upon.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular operation with DOM.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeDOMBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;nodeId&quot;, &quot;$ref&quot;: &quot;DOM.NodeId&quot;, &quot;description&quot;: &quot;Identifier of the node to remove breakpoint from.&quot; },
-                { &quot;name&quot;: &quot;type&quot;, &quot;$ref&quot;: &quot;DOMBreakpointType&quot;, &quot;description&quot;: &quot;Type of the breakpoint to remove.&quot; }
-            ],
-            &quot;description&quot;: &quot;Removes DOM breakpoint that was set using &lt;code&gt;setDOMBreakpoint&lt;/code&gt;.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;setEventListenerBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;DOM Event name to stop on (any DOM event will do).&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular DOM event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeEventListenerBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Event name.&quot; }
-            ],
-            &quot;description&quot;: &quot;Removes breakpoint on particular DOM event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;setInstrumentationBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Instrumentation name to stop on.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular native event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeInstrumentationBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Instrumentation name to stop on.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular native event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;setXHRBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Resource URL substring. All XHRs having this substring in the URL will get stopped upon.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on XMLHttpRequest.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeXHRBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Resource URL substring.&quot; }
-            ],
-            &quot;description&quot;: &quot;Removes breakpoint from XMLHttpRequest.&quot;
-        }
-    ]
-}
-,
-{
</del><span class="cx">     &quot;domain&quot;: &quot;DOMStorage&quot;,
</span><span class="cx">     &quot;description&quot;: &quot;Query and modify DOM storage.&quot;,
</span><span class="cx">     &quot;availability&quot;: &quot;web&quot;,
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIVersionsInspectoriOS93json"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Versions/Inspector-iOS-9.3.json (213625 => 213626)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Versions/Inspector-iOS-9.3.json        2017-03-09 04:23:48 UTC (rev 213625)
+++ trunk/Source/WebInspectorUI/Versions/Inspector-iOS-9.3.json        2017-03-09 04:55:56 UTC (rev 213626)
</span><span class="lines">@@ -1192,80 +1192,6 @@
</span><span class="cx"> }
</span><span class="cx"> ,
</span><span class="cx"> {
</span><del>-    &quot;domain&quot;: &quot;DOMDebugger&quot;,
-    &quot;description&quot;: &quot;DOM debugging allows setting breakpoints on particular DOM operations and events. JavaScript execution will stop on these operations as if there was a regular breakpoint set.&quot;,
-    &quot;availability&quot;: &quot;web&quot;,
-    &quot;types&quot;: [
-        {
-            &quot;id&quot;: &quot;DOMBreakpointType&quot;,
-            &quot;type&quot;: &quot;string&quot;,
-            &quot;enum&quot;: [&quot;subtree-modified&quot;, &quot;attribute-modified&quot;, &quot;node-removed&quot;],
-            &quot;description&quot;: &quot;DOM breakpoint type.&quot;
-        }
-    ],
-    &quot;commands&quot;: [
-        {
-            &quot;name&quot;: &quot;setDOMBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;nodeId&quot;, &quot;$ref&quot;: &quot;DOM.NodeId&quot;, &quot;description&quot;: &quot;Identifier of the node to set breakpoint on.&quot; },
-                { &quot;name&quot;: &quot;type&quot;, &quot;$ref&quot;: &quot;DOMBreakpointType&quot;, &quot;description&quot;: &quot;Type of the operation to stop upon.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular operation with DOM.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeDOMBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;nodeId&quot;, &quot;$ref&quot;: &quot;DOM.NodeId&quot;, &quot;description&quot;: &quot;Identifier of the node to remove breakpoint from.&quot; },
-                { &quot;name&quot;: &quot;type&quot;, &quot;$ref&quot;: &quot;DOMBreakpointType&quot;, &quot;description&quot;: &quot;Type of the breakpoint to remove.&quot; }
-            ],
-            &quot;description&quot;: &quot;Removes DOM breakpoint that was set using &lt;code&gt;setDOMBreakpoint&lt;/code&gt;.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;setEventListenerBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;DOM Event name to stop on (any DOM event will do).&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular DOM event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeEventListenerBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Event name.&quot; }
-            ],
-            &quot;description&quot;: &quot;Removes breakpoint on particular DOM event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;setInstrumentationBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Instrumentation name to stop on.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular native event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeInstrumentationBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;eventName&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Instrumentation name to stop on.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on particular native event.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;setXHRBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Resource URL substring. All XHRs having this substring in the URL will get stopped upon.&quot; }
-            ],
-            &quot;description&quot;: &quot;Sets breakpoint on XMLHttpRequest.&quot;
-        },
-        {
-            &quot;name&quot;: &quot;removeXHRBreakpoint&quot;,
-            &quot;parameters&quot;: [
-                { &quot;name&quot;: &quot;url&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Resource URL substring.&quot; }
-            ],
-            &quot;description&quot;: &quot;Removes breakpoint from XMLHttpRequest.&quot;
-        }
-    ]
-}
-,
-{
</del><span class="cx">     &quot;domain&quot;: &quot;DOMStorage&quot;,
</span><span class="cx">     &quot;description&quot;: &quot;Query and modify DOM storage.&quot;,
</span><span class="cx">     &quot;availability&quot;: &quot;web&quot;,
</span></span></pre>
</div>
</div>

</body>
</html>