<!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>[192936] trunk/Source/WebInspectorUI</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/192936">192936</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2015-12-01 17:37:38 -0800 (Tue, 01 Dec 2015)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: TreeOutline should just dispatch events via WebInspector.Object
https://bugs.webkit.org/show_bug.cgi?id=148067

Reviewed by Timothy Hatcher.

TreeOutline now dispatches most events via WebInspector.Object. The onselect and
ondeselect callbacks are replaced by a SelectionDidChange event, which includes
both the selected and deselected elements in its event data. The onexpand and oncollapse
callbacks are replaced by an ElementDisclosureDidChange event. This is consistent with the
behavior of onhidden, which had no corresponding onvisible callback.

Alas, TimelineView and TreeOutlineDataGridSynchronizer depended on the order in which
TreeOutline.onselect callbacks were chained together. The synchronizer added its
callback after the timeline view, which ensured that the tree and grid were in sync
before the view handled onselect and dispatched a SelectionPathComponentsDidChange.
The change notification causes the view's path components to be read, and timeline
views need the grid selection to be in a valid state to build path components.

This is addressed by having timeline views dispatch SelectionPathComponentsDidChange
events when the grid selection changes, instead of the tree selection. The change
required that the synchronizer no longer suppress notifications when selecting grid nodes.

* UserInterface/Views/DebuggerSidebarPanel.js:
(WebInspector.DebuggerSidebarPanel):
(WebInspector.DebuggerSidebarPanel.prototype._treeSelectionDidChange):
(WebInspector.DebuggerSidebarPanel.prototype._updatePauseReasonSection):

* UserInterface/Views/NavigationSidebarPanel.js:
(WebInspector.NavigationSidebarPanel.prototype.createContentTreeOutline):
(WebInspector.NavigationSidebarPanel.prototype._treeElementAddedOrChanged):

* UserInterface/Views/NetworkGridContentView.js:
(WebInspector.NetworkGridContentView):
(WebInspector.NetworkGridContentView.prototype._treeSelectionDidChange):

* UserInterface/Views/ResourceSidebarPanel.js:
(WebInspector.ResourceSidebarPanel):
(WebInspector.ResourceSidebarPanel.prototype._treeSelectionDidChange):
(WebInspector.ResourceSidebarPanel.prototype._treeElementSelected): Deleted.

* UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
(WebInspector.ScopeChainDetailsSidebarPanel.prototype._generateCallFramesSection):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype._generateWatchExpressionsSection):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype._treeElementAdded):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype._treeElementDisclosureDidChange):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype._objectTreeExpandHandler): Deleted.
(WebInspector.ScopeChainDetailsSidebarPanel.prototype._objectTreeCollapseHandler): Deleted.

* UserInterface/Views/SearchSidebarPanel.js:
(WebInspector.SearchSidebarPanel):
(WebInspector.SearchSidebarPanel.prototype._treeSelectionDidChange):
(WebInspector.SearchSidebarPanel.prototype._treeElementSelected): Deleted.

* UserInterface/Views/StorageSidebarPanel.js:
(WebInspector.StorageSidebarPanel):
(WebInspector.StorageSidebarPanel._treeSelectionDidChange):

* UserInterface/Views/TimelineDataGrid.js:
(WebInspector.TimelineDataGrid.prototype._createPopoverContent):
(WebInspector.TimelineDataGrid.prototype._popoverCallStackTreeSelectionDidChange):
(WebInspector.TimelineDataGrid):

* UserInterface/Views/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel):
(WebInspector.TimelineSidebarPanel.prototype._recordingsTreeSelectionDidChange):
(WebInspector.TimelineSidebarPanel.prototype._timelinesTreeSelectionDidChange):
(WebInspector.TimelineSidebarPanel.prototype._timelinesTreeElementSelected): Deleted.

* UserInterface/Views/TimelineView.js:
(WebInspector.TimelineView):
(WebInspector.TimelineView.prototype._treeSelectionDidChange):
(WebInspector.TimelineView.prototype.treeElementSelected):
Don't dispatch SelectionPathComponentsDidChange. Timeline views already do this
in response to grid selection events.

* UserInterface/Views/TreeOutline.js:
(WebInspector.TreeOutline.prototype.appendChild):
(WebInspector.TreeOutline.prototype.insertChild):
(WebInspector.TreeOutline.prototype.removeChildAtIndex):
(WebInspector.TreeOutline.prototype.removeChildren):
(WebInspector.TreeOutline.prototype.removeChildrenRecursive):
(WebInspector.TreeOutline.prototype._treeElementDidChange):
(WebInspector.TreeElement.prototype.set hidden):
(WebInspector.TreeElement.prototype.collapse):
(WebInspector.TreeElement.prototype.expand):
(WebInspector.TreeElement.prototype.select):
(WebInspector.TreeElement.prototype.deselect):
(WebInspector.TreeElement.prototype.get childrenListElement): Deleted.
Removed dead code.

* UserInterface/Views/TreeOutlineDataGridSynchronizer.js:
(WebInspector.TreeOutlineDataGridSynchronizer):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeSelectionDidChange):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementAdded):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementRemoved):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementDisclosureDidChange):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementVisibilityDidChange):
(WebInspector.TreeOutlineDataGridSynchronizer.treeOutline.onadd): Deleted.
(WebInspector.TreeOutlineDataGridSynchronizer.treeOutline.onremove): Deleted.
(WebInspector.TreeOutlineDataGridSynchronizer.treeOutline.onexpand): Deleted.
(WebInspector.TreeOutlineDataGridSynchronizer.treeOutline.oncollapse): Deleted.
(WebInspector.TreeOutlineDataGridSynchronizer.treeOutline.onhidden): Deleted.
(WebInspector.TreeOutlineDataGridSynchronizer.treeOutline.onselect): Deleted.
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementSelected): Deleted.
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementExpanded): Deleted.
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementCollapsed): Deleted.
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementHiddenChanged): Deleted.

* UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js:
(WebInspector.VisualStyleCommaSeparatedKeywordEditor):
(WebInspector.VisualStyleCommaSeparatedKeywordEditor.prototype._treeSelectionDidChange):
(WebInspector.VisualStyleCommaSeparatedKeywordEditor.prototype._treeElementSelected): Deleted.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDebuggerSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkGridContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsScopeChainDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSearchSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsStorageSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineDataGridjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinejs">trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlineDataGridSynchronizerjs">trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutlineDataGridSynchronizer.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleCommaSeparatedKeywordEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (192935 => 192936)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2015-12-02 01:37:19 UTC (rev 192935)
+++ trunk/Source/WebInspectorUI/ChangeLog        2015-12-02 01:37:38 UTC (rev 192936)
</span><span class="lines">@@ -1,3 +1,118 @@
</span><ins>+2015-12-01  Matt Baker  &lt;mattbaker@apple.com&gt;
+
+        Web Inspector: TreeOutline should just dispatch events via WebInspector.Object
+        https://bugs.webkit.org/show_bug.cgi?id=148067
+
+        Reviewed by Timothy Hatcher.
+
+        TreeOutline now dispatches most events via WebInspector.Object. The onselect and
+        ondeselect callbacks are replaced by a SelectionDidChange event, which includes
+        both the selected and deselected elements in its event data. The onexpand and oncollapse
+        callbacks are replaced by an ElementDisclosureDidChange event. This is consistent with the
+        behavior of onhidden, which had no corresponding onvisible callback.
+
+        Alas, TimelineView and TreeOutlineDataGridSynchronizer depended on the order in which
+        TreeOutline.onselect callbacks were chained together. The synchronizer added its
+        callback after the timeline view, which ensured that the tree and grid were in sync
+        before the view handled onselect and dispatched a SelectionPathComponentsDidChange.
+        The change notification causes the view's path components to be read, and timeline
+        views need the grid selection to be in a valid state to build path components.
+
+        This is addressed by having timeline views dispatch SelectionPathComponentsDidChange
+        events when the grid selection changes, instead of the tree selection. The change
+        required that the synchronizer no longer suppress notifications when selecting grid nodes.
+
+        * UserInterface/Views/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel):
+        (WebInspector.DebuggerSidebarPanel.prototype._treeSelectionDidChange):
+        (WebInspector.DebuggerSidebarPanel.prototype._updatePauseReasonSection):
+
+        * UserInterface/Views/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel.prototype.createContentTreeOutline):
+        (WebInspector.NavigationSidebarPanel.prototype._treeElementAddedOrChanged):
+
+        * UserInterface/Views/NetworkGridContentView.js:
+        (WebInspector.NetworkGridContentView):
+        (WebInspector.NetworkGridContentView.prototype._treeSelectionDidChange):
+
+        * UserInterface/Views/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel):
+        (WebInspector.ResourceSidebarPanel.prototype._treeSelectionDidChange):
+        (WebInspector.ResourceSidebarPanel.prototype._treeElementSelected): Deleted.
+
+        * UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype._generateCallFramesSection):
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype._generateWatchExpressionsSection):
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype._treeElementAdded):
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype._treeElementDisclosureDidChange):
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype._objectTreeExpandHandler): Deleted.
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype._objectTreeCollapseHandler): Deleted.
+
+        * UserInterface/Views/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel):
+        (WebInspector.SearchSidebarPanel.prototype._treeSelectionDidChange):
+        (WebInspector.SearchSidebarPanel.prototype._treeElementSelected): Deleted.
+
+        * UserInterface/Views/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel):
+        (WebInspector.StorageSidebarPanel._treeSelectionDidChange):
+
+        * UserInterface/Views/TimelineDataGrid.js:
+        (WebInspector.TimelineDataGrid.prototype._createPopoverContent):
+        (WebInspector.TimelineDataGrid.prototype._popoverCallStackTreeSelectionDidChange):
+        (WebInspector.TimelineDataGrid):
+
+        * UserInterface/Views/TimelineSidebarPanel.js:
+        (WebInspector.TimelineSidebarPanel):
+        (WebInspector.TimelineSidebarPanel.prototype._recordingsTreeSelectionDidChange):
+        (WebInspector.TimelineSidebarPanel.prototype._timelinesTreeSelectionDidChange):
+        (WebInspector.TimelineSidebarPanel.prototype._timelinesTreeElementSelected): Deleted.
+
+        * UserInterface/Views/TimelineView.js:
+        (WebInspector.TimelineView):
+        (WebInspector.TimelineView.prototype._treeSelectionDidChange):
+        (WebInspector.TimelineView.prototype.treeElementSelected):
+        Don't dispatch SelectionPathComponentsDidChange. Timeline views already do this
+        in response to grid selection events.
+
+        * UserInterface/Views/TreeOutline.js:
+        (WebInspector.TreeOutline.prototype.appendChild):
+        (WebInspector.TreeOutline.prototype.insertChild):
+        (WebInspector.TreeOutline.prototype.removeChildAtIndex):
+        (WebInspector.TreeOutline.prototype.removeChildren):
+        (WebInspector.TreeOutline.prototype.removeChildrenRecursive):
+        (WebInspector.TreeOutline.prototype._treeElementDidChange):
+        (WebInspector.TreeElement.prototype.set hidden):
+        (WebInspector.TreeElement.prototype.collapse):
+        (WebInspector.TreeElement.prototype.expand):
+        (WebInspector.TreeElement.prototype.select):
+        (WebInspector.TreeElement.prototype.deselect):
+        (WebInspector.TreeElement.prototype.get childrenListElement): Deleted.
+        Removed dead code.
+
+        * UserInterface/Views/TreeOutlineDataGridSynchronizer.js:
+        (WebInspector.TreeOutlineDataGridSynchronizer):
+        (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeSelectionDidChange):
+        (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementAdded):
+        (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementRemoved):
+        (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementDisclosureDidChange):
+        (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementVisibilityDidChange):
+        (WebInspector.TreeOutlineDataGridSynchronizer.treeOutline.onadd): Deleted.
+        (WebInspector.TreeOutlineDataGridSynchronizer.treeOutline.onremove): Deleted.
+        (WebInspector.TreeOutlineDataGridSynchronizer.treeOutline.onexpand): Deleted.
+        (WebInspector.TreeOutlineDataGridSynchronizer.treeOutline.oncollapse): Deleted.
+        (WebInspector.TreeOutlineDataGridSynchronizer.treeOutline.onhidden): Deleted.
+        (WebInspector.TreeOutlineDataGridSynchronizer.treeOutline.onselect): Deleted.
+        (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementSelected): Deleted.
+        (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementExpanded): Deleted.
+        (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementCollapsed): Deleted.
+        (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeElementHiddenChanged): Deleted.
+
+        * UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js:
+        (WebInspector.VisualStyleCommaSeparatedKeywordEditor):
+        (WebInspector.VisualStyleCommaSeparatedKeywordEditor.prototype._treeSelectionDidChange):
+        (WebInspector.VisualStyleCommaSeparatedKeywordEditor.prototype._treeElementSelected): Deleted.
+
</ins><span class="cx"> 2015-12-01  Joseph Pecoraro  &lt;pecoraro@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: Timestamp in Tooltip of Event Markers is incorrect
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDebuggerSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js (192935 => 192936)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js        2015-12-02 01:37:19 UTC (rev 192935)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js        2015-12-02 01:37:38 UTC (rev 192936)
</span><span class="lines">@@ -113,7 +113,7 @@
</span><span class="cx">         this.filterBar.addFilterBarButton(&quot;debugger-show-resources-with-issues-only&quot;, showResourcesWithIssuesOnlyFilterFunction, true, WebInspector.UIString(&quot;Show only resources with issues.&quot;), WebInspector.UIString(&quot;Show resources with and without issues.&quot;), &quot;Images/Errors.svg&quot;, 15, 15);
</span><span class="cx"> 
</span><span class="cx">         this._breakpointsContentTreeOutline = this.contentTreeOutline;
</span><del>-        this._breakpointsContentTreeOutline.onselect = this._treeElementSelected.bind(this);
</del><ins>+        this._breakpointsContentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
</ins><span class="cx">         this._breakpointsContentTreeOutline.ondelete = this._breakpointTreeOutlineDeleteTreeElement.bind(this);
</span><span class="cx">         this._breakpointsContentTreeOutline.oncontextmenu = this._breakpointTreeOutlineContextMenuTreeElement.bind(this);
</span><span class="cx"> 
</span><span class="lines">@@ -130,7 +130,7 @@
</span><span class="cx">         this.contentElement.appendChild(breakpointsSection.element);
</span><span class="cx"> 
</span><span class="cx">         this._callStackContentTreeOutline = this.createContentTreeOutline(true, true);
</span><del>-        this._callStackContentTreeOutline.onselect = this._treeElementSelected.bind(this);
</del><ins>+        this._callStackContentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
</ins><span class="cx"> 
</span><span class="cx">         this._callStackRow = new WebInspector.DetailsSectionRow(WebInspector.UIString(&quot;No Call Frames&quot;));
</span><span class="cx">         this._callStackRow.showEmptyMessage();
</span><span class="lines">@@ -598,7 +598,7 @@
</span><span class="cx">         contextMenu.appendItem(WebInspector.UIString(&quot;Delete Breakpoints&quot;), removeAllResourceBreakpoints);
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _treeElementSelected(treeElement, selectedByUser)
</del><ins>+    _treeSelectionDidChange(event)
</ins><span class="cx">     {
</span><span class="cx">         function deselectCallStackContentTreeElements()
</span><span class="cx">         {
</span><span class="lines">@@ -624,6 +624,10 @@
</span><span class="cx">                 selectedTreeElement.deselect();
</span><span class="cx">         }
</span><span class="cx"> 
</span><ins>+        let treeElement = event.data.selectedElement;
+        if (!treeElement)
+            return;
+
</ins><span class="cx">         if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement) {
</span><span class="cx">             deselectCallStackContentTreeElements.call(this);
</span><span class="cx">             deselectPauseReasonContentTreeElements.call(this);
</span><span class="lines">@@ -731,7 +735,8 @@
</span><span class="cx">             if (pauseData &amp;&amp; pauseData.breakpointId) {
</span><span class="cx">                 var breakpoint = WebInspector.debuggerManager.breakpointForIdentifier(pauseData.breakpointId);
</span><span class="cx">                 var breakpointTreeOutline = this.createContentTreeOutline(true, true);
</span><del>-                breakpointTreeOutline.onselect = this._treeElementSelected.bind(this);
</del><ins>+                breakpointTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+
</ins><span class="cx">                 var breakpointTreeElement = new WebInspector.BreakpointTreeElement(breakpoint, WebInspector.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName, WebInspector.UIString(&quot;Triggered Breakpoint&quot;));
</span><span class="cx">                 var breakpointDetailsSection = new WebInspector.DetailsSectionRow;
</span><span class="cx">                 breakpointTreeOutline.appendChild(breakpointTreeElement);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js (192935 => 192936)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js        2015-12-02 01:37:19 UTC (rev 192935)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js        2015-12-02 01:37:38 UTC (rev 192936)
</span><span class="lines">@@ -166,10 +166,9 @@
</span><span class="cx">         contentTreeOutline.allowsRepeatSelection = true;
</span><span class="cx"> 
</span><span class="cx">         if (!suppressFiltering) {
</span><del>-            contentTreeOutline.onadd = this._treeElementAddedOrChanged.bind(this);
-            contentTreeOutline.onchange = this._treeElementAddedOrChanged.bind(this);
-            contentTreeOutline.onexpand = this._treeElementExpandedOrCollapsed.bind(this);
-            contentTreeOutline.oncollapse = this._treeElementExpandedOrCollapsed.bind(this);
</del><ins>+            contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementAdded, this._treeElementAddedOrChanged, this);
+            contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementDidChange, this._treeElementAddedOrChanged, this);
+            contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementDisclosureDidChanged, this._treeElementDisclosureDidChange, this);
</ins><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         if (dontHideByDefault)
</span><span class="lines">@@ -556,14 +555,15 @@
</span><span class="cx">         }
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _treeElementAddedOrChanged(treeElement)
</del><ins>+    _treeElementAddedOrChanged(event)
</ins><span class="cx">     {
</span><span class="cx">         // Don't populate if we don't have any active filters.
</span><span class="cx">         // We only need to populate when a filter needs to reveal.
</span><span class="cx">         var dontPopulate = !this._filterBar.hasActiveFilters() &amp;&amp; !this.shouldFilterPopulate();
</span><span class="cx"> 
</span><span class="cx">         // Apply the filters to the tree element and its descendants.
</span><del>-        var currentTreeElement = treeElement;
</del><ins>+        let treeElement = event.data.element;
+        let currentTreeElement = treeElement;
</ins><span class="cx">         while (currentTreeElement &amp;&amp; !currentTreeElement.root) {
</span><span class="cx">             const currentTreeElementWasHidden = currentTreeElement.hidden;
</span><span class="cx">             this.applyFiltersToTreeElement(currentTreeElement);
</span><span class="lines">@@ -582,7 +582,7 @@
</span><span class="cx">         this.treeElementAddedOrChanged(treeElement);
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _treeElementExpandedOrCollapsed(treeElement)
</del><ins>+    _treeElementDisclosureDidChange(event)
</ins><span class="cx">     {
</span><span class="cx">         this._updateContentOverflowShadowVisibility();
</span><span class="cx">     }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkGridContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js (192935 => 192936)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js        2015-12-02 01:37:19 UTC (rev 192935)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js        2015-12-02 01:37:38 UTC (rev 192936)
</span><span class="lines">@@ -35,7 +35,7 @@
</span><span class="cx">         this._networkSidebarPanel = extraArguments.networkSidebarPanel;
</span><span class="cx"> 
</span><span class="cx">         this._contentTreeOutline = this._networkSidebarPanel.contentTreeOutline;
</span><del>-        this._contentTreeOutline.onselect = this._treeElementSelected.bind(this);
</del><ins>+        this._contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
</ins><span class="cx"> 
</span><span class="cx">         var columns = {domain: {}, type: {}, method: {}, scheme: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, requestSent: {}, latency: {}, duration: {}};
</span><span class="cx"> 
</span><span class="lines">@@ -202,13 +202,14 @@
</span><span class="cx">         dataGridNode.revealAndSelect();
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _treeElementSelected(treeElement, selectedByUser)
</del><ins>+    _treeSelectionDidChange(event)
</ins><span class="cx">     {
</span><span class="cx">         this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
</span><span class="cx"> 
</span><span class="cx">         if (!this._networkSidebarPanel.canShowDifferentContentView())
</span><span class="cx">             return;
</span><span class="cx"> 
</span><ins>+        let treeElement = event.data.selectedElement;
</ins><span class="cx">         if (treeElement instanceof WebInspector.ResourceTreeElement) {
</span><span class="cx">             WebInspector.showRepresentedObject(treeElement.representedObject);
</span><span class="cx">             return;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResourceSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js (192935 => 192936)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js        2015-12-02 01:37:19 UTC (rev 192935)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js        2015-12-02 01:37:38 UTC (rev 192936)
</span><span class="lines">@@ -62,7 +62,7 @@
</span><span class="cx"> 
</span><span class="cx">         WebInspector.notifications.addEventListener(WebInspector.Notification.ExtraDomainsActivated, this._extraDomainsActivated, this);
</span><span class="cx"> 
</span><del>-        this.contentTreeOutline.onselect = this._treeElementSelected.bind(this);
</del><ins>+        this.contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
</ins><span class="cx">         this.contentTreeOutline.includeSourceMapResourceChildren = true;
</span><span class="cx"> 
</span><span class="cx">         if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript)
</span><span class="lines">@@ -333,9 +333,10 @@
</span><span class="cx">         }
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _treeElementSelected(treeElement, selectedByUser)
</del><ins>+    _treeSelectionDidChange(event)
</ins><span class="cx">     {
</span><del>-        if (treeElement instanceof WebInspector.FolderTreeElement)
</del><ins>+        let treeElement = event.data.selectedElement;
+        if (!treeElement || treeElement instanceof WebInspector.FolderTreeElement)
</ins><span class="cx">             return;
</span><span class="cx"> 
</span><span class="cx">         if (treeElement instanceof WebInspector.ResourceTreeElement
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScopeChainDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js (192935 => 192936)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js        2015-12-02 01:37:19 UTC (rev 192935)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js        2015-12-02 01:37:38 UTC (rev 192936)
</span><span class="lines">@@ -221,9 +221,8 @@
</span><span class="cx">                 objectTree.appendExtraPropertyDescriptor(extraPropertyDescriptor);
</span><span class="cx"> 
</span><span class="cx">             let treeOutline = objectTree.treeOutline;
</span><del>-            treeOutline.onadd = this._objectTreeAddHandler.bind(this, detailsSectionIdentifier);
-            treeOutline.onexpand = this._objectTreeExpandHandler.bind(this, detailsSectionIdentifier);
-            treeOutline.oncollapse = this._objectTreeCollapseHandler.bind(this, detailsSectionIdentifier);
</del><ins>+            treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementAdded, this._treeElementAdded.bind(this, detailsSectionIdentifier), this);
+            treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementDisclosureDidChanged, this._treeElementDisclosureDidChange.bind(this, detailsSectionIdentifier), this);
</ins><span class="cx"> 
</span><span class="cx">             let detailsSection = new WebInspector.DetailsSection(detailsSectionIdentifier, title, null, null, collapsedByDefault);
</span><span class="cx">             detailsSection.groups[0].rows = [new WebInspector.DetailsSectionPropertiesRow(objectTree)];
</span><span class="lines">@@ -254,9 +253,8 @@
</span><span class="cx"> 
</span><span class="cx">         let treeOutline = objectTree.treeOutline;
</span><span class="cx">         const watchExpressionSectionIdentifier = &quot;watch-expressions&quot;;
</span><del>-        treeOutline.onadd = this._objectTreeAddHandler.bind(this, watchExpressionSectionIdentifier);
-        treeOutline.onexpand = this._objectTreeExpandHandler.bind(this, watchExpressionSectionIdentifier);
-        treeOutline.oncollapse = this._objectTreeCollapseHandler.bind(this, watchExpressionSectionIdentifier);
</del><ins>+        treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementAdded, this._treeElementAdded.bind(this, watchExpressionSectionIdentifier), this);
+        treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementDisclosureDidChanged, this._treeElementDisclosureDidChange.bind(this, watchExpressionSectionIdentifier), this);
</ins><span class="cx">         treeOutline.objectTreeElementAddContextMenuItems = this._objectTreeElementAddContextMenuItems.bind(this);
</span><span class="cx"> 
</span><span class="cx">         let promises = [];
</span><span class="lines">@@ -422,8 +420,9 @@
</span><span class="cx">         return identifier + &quot;-&quot; + propertyPath.fullPath;
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _objectTreeAddHandler(identifier, treeElement)
</del><ins>+    _treeElementAdded(identifier, event)
</ins><span class="cx">     {
</span><ins>+        let treeElement = event.data.element;
</ins><span class="cx">         let propertyPathIdentifier = this._propertyPathIdentifierForTreeElement(identifier, treeElement);
</span><span class="cx">         if (!propertyPathIdentifier)
</span><span class="cx">             return;
</span><span class="lines">@@ -432,24 +431,19 @@
</span><span class="cx">             treeElement.expand();
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _objectTreeExpandHandler(identifier, treeElement)
</del><ins>+    _treeElementDisclosureDidChange(identifier, event)
</ins><span class="cx">     {
</span><ins>+        let treeElement = event.data.element;
</ins><span class="cx">         let propertyPathIdentifier = this._propertyPathIdentifierForTreeElement(identifier, treeElement);
</span><span class="cx">         if (!propertyPathIdentifier)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        WebInspector.ScopeChainDetailsSidebarPanel._autoExpandProperties.add(propertyPathIdentifier);
</del><ins>+        if (treeElement.expanded)
+            WebInspector.ScopeChainDetailsSidebarPanel._autoExpandProperties.add(propertyPathIdentifier);
+        else
+            WebInspector.ScopeChainDetailsSidebarPanel._autoExpandProperties.delete(propertyPathIdentifier);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _objectTreeCollapseHandler(identifier, treeElement)
-    {
-        let propertyPathIdentifier = this._propertyPathIdentifierForTreeElement(identifier, treeElement);
-        if (!propertyPathIdentifier)
-            return;
-
-        WebInspector.ScopeChainDetailsSidebarPanel._autoExpandProperties.delete(propertyPathIdentifier);
-    }
-
</del><span class="cx">     _updateWatchExpressionsNavigationBar()
</span><span class="cx">     {
</span><span class="cx">         let enabled = this._watchExpressionsSetting.value.length;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSearchSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.js (192935 => 192936)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.js        2015-12-02 01:37:19 UTC (rev 192935)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.js        2015-12-02 01:37:38 UTC (rev 192936)
</span><span class="lines">@@ -52,7 +52,7 @@
</span><span class="cx"> 
</span><span class="cx">         WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
</span><span class="cx"> 
</span><del>-        this.contentTreeOutline.onselect = this._treeElementSelected.bind(this);
</del><ins>+        this.contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="lines">@@ -346,9 +346,10 @@
</span><span class="cx">             this.focusSearchField();
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _treeElementSelected(treeElement, selectedByUser)
</del><ins>+    _treeSelectionDidChange(event)
</ins><span class="cx">     {
</span><del>-        if (treeElement instanceof WebInspector.FolderTreeElement)
</del><ins>+        let treeElement = event.data.selectedElement;
+        if (!treeElement || treeElement instanceof WebInspector.FolderTreeElement)
</ins><span class="cx">             return;
</span><span class="cx"> 
</span><span class="cx">         if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement) {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsStorageSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.js (192935 => 192936)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.js        2015-12-02 01:37:19 UTC (rev 192935)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.js        2015-12-02 01:37:38 UTC (rev 192936)
</span><span class="lines">@@ -86,7 +86,7 @@
</span><span class="cx">         WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestAdded, this._frameManifestAdded, this);
</span><span class="cx">         WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestRemoved, this._frameManifestRemoved, this);
</span><span class="cx"> 
</span><del>-        this.contentTreeOutline.onselect = this._treeElementSelected.bind(this);
</del><ins>+        this.contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
</ins><span class="cx"> 
</span><span class="cx">         for (var domStorageObject of WebInspector.storageManager.domStorageObjects)
</span><span class="cx">             this._addDOMStorageObject(domStorageObject);
</span><span class="lines">@@ -161,8 +161,12 @@
</span><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span><del>-    _treeElementSelected(treeElement, selectedByUser)
</del><ins>+    _treeSelectionDidChange(event)
</ins><span class="cx">     {
</span><ins>+        let treeElement = event.data.selectedElement;
+        if (!treeElement)
+            return;
+
</ins><span class="cx">         if (treeElement instanceof WebInspector.FolderTreeElement || treeElement instanceof WebInspector.DatabaseHostTreeElement ||
</span><span class="cx">             treeElement instanceof WebInspector.IndexedDatabaseHostTreeElement || treeElement instanceof WebInspector.IndexedDatabaseTreeElement
</span><span class="cx">             || treeElement instanceof WebInspector.ApplicationCacheManifestTreeElement)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js (192935 => 192936)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js        2015-12-02 01:37:19 UTC (rev 192935)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js        2015-12-02 01:37:38 UTC (rev 192936)
</span><span class="lines">@@ -453,7 +453,7 @@
</span><span class="cx">             var contentElement = document.createElement(&quot;ol&quot;);
</span><span class="cx">             contentElement.classList.add(&quot;timeline-data-grid-tree-outline&quot;);
</span><span class="cx">             this._popoverCallStackTreeOutline = new WebInspector.TreeOutline(contentElement);
</span><del>-            this._popoverCallStackTreeOutline.onselect = this._popoverCallStackTreeElementSelected.bind(this);
</del><ins>+            this._popoverCallStackTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._popoverCallStackTreeSelectionDidChange, this);
</ins><span class="cx">         } else
</span><span class="cx">             this._popoverCallStackTreeOutline.removeChildren();
</span><span class="cx"> 
</span><span class="lines">@@ -469,8 +469,12 @@
</span><span class="cx">         return content;
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _popoverCallStackTreeElementSelected(treeElement, selectedByUser)
</del><ins>+    _popoverCallStackTreeSelectionDidChange(event)
</ins><span class="cx">     {
</span><ins>+        let treeElement = event.data.selectedElement;
+        if (!treeElement)
+            return;
+
</ins><span class="cx">         this._popover.dismiss();
</span><span class="cx"> 
</span><span class="cx">         console.assert(treeElement instanceof WebInspector.CallFrameTreeElement, &quot;TreeElements in TimelineDataGrid popover should always be CallFrameTreeElements&quot;);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (192935 => 192936)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js        2015-12-02 01:37:19 UTC (rev 192935)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js        2015-12-02 01:37:38 UTC (rev 192936)
</span><span class="lines">@@ -62,13 +62,13 @@
</span><span class="cx">         this._recordingsTreeOutline = this.createContentTreeOutline(true, true);
</span><span class="cx">         this._recordingsTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
</span><span class="cx">         this._recordingsTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
</span><del>-        this._recordingsTreeOutline.onselect = this._recordingsTreeElementSelected.bind(this);
</del><ins>+        this._recordingsTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._recordingsTreeSelectionDidChange, this);
</ins><span class="cx">         this._timelinesContentContainerElement.appendChild(this._recordingsTreeOutline.element);
</span><span class="cx"> 
</span><span class="cx">         // Maintain a tree outline with tree elements for each timeline of the selected recording.
</span><span class="cx">         this._timelinesTreeOutline = this.createContentTreeOutline(true, true);
</span><span class="cx">         this._timelinesTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
</span><del>-        this._timelinesTreeOutline.onselect = this._timelinesTreeElementSelected.bind(this);
</del><ins>+        this._timelinesTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._timelinesTreeSelectionDidChange, this);
</ins><span class="cx">         this._timelinesContentContainerElement.appendChild(this._timelinesTreeOutline.element);
</span><span class="cx"> 
</span><span class="cx">         this._timelineTreeElementMap = new Map;
</span><span class="lines">@@ -614,8 +614,12 @@
</span><span class="cx">             this.showTimelineOverview();
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _recordingsTreeElementSelected(treeElement, selectedByUser)
</del><ins>+    _recordingsTreeSelectionDidChange(event)
</ins><span class="cx">     {
</span><ins>+        let treeElement = event.data.selectedElement;
+        if (!treeElement)
+            return;
+
</ins><span class="cx">         console.assert(treeElement.representedObject instanceof WebInspector.TimelineRecording);
</span><span class="cx"> 
</span><span class="cx">         this._recordingSelected(treeElement.representedObject);
</span><span class="lines">@@ -627,17 +631,22 @@
</span><span class="cx">             this._refreshFrameSelectionChart();
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _timelinesTreeElementSelected(treeElement, selectedByUser)
</del><ins>+    _timelinesTreeSelectionDidChange(event)
</ins><span class="cx">     {
</span><ins>+        let treeElement = event.data.selectedElement;
+        if (!treeElement)
+            return;
+
</ins><span class="cx">         console.assert(this._timelineTreeElementMap.get(treeElement.representedObject) === treeElement, treeElement);
</span><span class="cx"> 
</span><span class="cx">         // If not selected by user, then this selection merely synced the tree element with the content view's contents.
</span><ins>+        let selectedByUser = event.data.selectedByUser;
</ins><span class="cx">         if (!selectedByUser) {
</span><span class="cx">             console.assert(this._displayedContentView.currentTimelineView.representedObject === treeElement.representedObject);
</span><span class="cx">             return;
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        var timeline = treeElement.representedObject;
</del><ins>+        let timeline = treeElement.representedObject;
</ins><span class="cx">         console.assert(timeline instanceof WebInspector.Timeline, timeline);
</span><span class="cx">         console.assert(this._displayedRecording.timelines.get(timeline.type) === timeline, timeline);
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js (192935 => 192936)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js        2015-12-02 01:37:19 UTC (rev 192935)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js        2015-12-02 01:37:38 UTC (rev 192936)
</span><span class="lines">@@ -39,8 +39,7 @@
</span><span class="cx">         this._timelineSidebarPanel = extraArguments.timelineSidebarPanel;
</span><span class="cx"> 
</span><span class="cx">         this._contentTreeOutline = this._timelineSidebarPanel.createContentTreeOutline();
</span><del>-        this._contentTreeOutline.onselect = this.treeElementSelected.bind(this);
-        this._contentTreeOutline.ondeselect = this.treeElementDeselected.bind(this);
</del><ins>+        this._contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
</ins><span class="cx">         this._contentTreeOutline.__canShowContentViewForTreeElement = this.canShowContentViewForTreeElement.bind(this);
</span><span class="cx"> 
</span><span class="cx">         this.element.classList.add(&quot;timeline-view&quot;);
</span><span class="lines">@@ -229,8 +228,6 @@
</span><span class="cx">     {
</span><span class="cx">         // Implemented by sub-classes if needed.
</span><span class="cx"> 
</span><del>-        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
-
</del><span class="cx">         if (!this._timelineSidebarPanel.canShowDifferentContentView())
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="lines">@@ -239,4 +236,15 @@
</span><span class="cx"> 
</span><span class="cx">         this.showContentViewForTreeElement(treeElement);
</span><span class="cx">     }
</span><ins>+
+    // Private
+
+    _treeSelectionDidChange(event)
+    {
+        if (event.data.deselectedElement)
+            this.treeElementDeselected(event.data.deselectedElement);
+
+        if (event.data.selectedElement)
+            this.treeElementSelected(event.data.selectedElement, event.data.selectedByUser);
+    }
</ins><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js (192935 => 192936)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js        2015-12-02 01:37:19 UTC (rev 192935)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js        2015-12-02 01:37:38 UTC (rev 192936)
</span><span class="lines">@@ -89,8 +89,8 @@
</span><span class="cx">         if (this._childrenListNode)
</span><span class="cx">             child._attach();
</span><span class="cx"> 
</span><del>-        if (this.treeOutline.onadd)
-            this.treeOutline.onadd(child);
</del><ins>+        if (this.treeOutline)
+            this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementAdded, {element: child});
</ins><span class="cx"> 
</span><span class="cx">         if (isFirstChild &amp;&amp; this.expanded)
</span><span class="cx">             this.expand();
</span><span class="lines">@@ -139,8 +139,8 @@
</span><span class="cx">         if (this._childrenListNode)
</span><span class="cx">             child._attach();
</span><span class="cx"> 
</span><del>-        if (this.treeOutline.onadd)
-            this.treeOutline.onadd(child);
</del><ins>+        if (this.treeOutline)
+            this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementAdded, {element: child});
</ins><span class="cx"> 
</span><span class="cx">         if (isFirstChild &amp;&amp; this.expanded)
</span><span class="cx">             this.expand();
</span><span class="lines">@@ -152,10 +152,10 @@
</span><span class="cx">         if (childIndex &lt; 0 || childIndex &gt;= this.children.length)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        var child = this.children[childIndex];
</del><ins>+        let child = this.children[childIndex];
</ins><span class="cx">         this.children.splice(childIndex, 1);
</span><span class="cx"> 
</span><del>-        var parent = child.parent;
</del><ins>+        let parent = child.parent;
</ins><span class="cx">         if (child.deselect(suppressOnDeselect)) {
</span><span class="cx">             if (child.previousSibling &amp;&amp; !suppressSelectSibling)
</span><span class="cx">                 child.previousSibling.select(true, false);
</span><span class="lines">@@ -170,9 +170,10 @@
</span><span class="cx">         if (child.nextSibling)
</span><span class="cx">             child.nextSibling.previousSibling = child.previousSibling;
</span><span class="cx"> 
</span><del>-        if (child.treeOutline) {
-            child.treeOutline._forgetTreeElement(child);
-            child.treeOutline._forgetChildrenRecursive(child);
</del><ins>+        let treeOutline = child.treeOutline;
+        if (treeOutline) {
+            treeOutline._forgetTreeElement(child);
+            treeOutline._forgetChildrenRecursive(child);
</ins><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         child._detach();
</span><span class="lines">@@ -181,8 +182,8 @@
</span><span class="cx">         child.nextSibling = null;
</span><span class="cx">         child.previousSibling = null;
</span><span class="cx"> 
</span><del>-        if (this.treeOutline &amp;&amp; this.treeOutline.onremove)
-            this.treeOutline.onremove(child);
</del><ins>+        if (treeOutline)
+            treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementRemoved, {element: child});
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     removeChild(child, suppressOnDeselect, suppressSelectSibling)
</span><span class="lines">@@ -207,15 +208,13 @@
</span><span class="cx"> 
</span><span class="cx">     removeChildren(suppressOnDeselect)
</span><span class="cx">     {
</span><del>-        var treeOutline = this.treeOutline;
-
-        for (var i = 0; i &lt; this.children.length; ++i) {
-            var child = this.children[i];
</del><ins>+        for (let child of this.children) {
</ins><span class="cx">             child.deselect(suppressOnDeselect);
</span><span class="cx"> 
</span><del>-            if (child.treeOutline) {
-                child.treeOutline._forgetTreeElement(child);
-                child.treeOutline._forgetChildrenRecursive(child);
</del><ins>+            let treeOutline = child.treeOutline;
+            if (treeOutline) {
+                treeOutline._forgetTreeElement(child);
+                treeOutline._forgetChildrenRecursive(child);
</ins><span class="cx">             }
</span><span class="cx"> 
</span><span class="cx">             child._detach();
</span><span class="lines">@@ -224,8 +223,8 @@
</span><span class="cx">             child.nextSibling = null;
</span><span class="cx">             child.previousSibling = null;
</span><span class="cx"> 
</span><del>-            if (treeOutline &amp;&amp; treeOutline.onremove)
-                treeOutline.onremove(child);
</del><ins>+            if (treeOutline)
+                treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementRemoved, {element: child});
</ins><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this.children = [];
</span><span class="lines">@@ -233,23 +232,21 @@
</span><span class="cx"> 
</span><span class="cx">     removeChildrenRecursive(suppressOnDeselect)
</span><span class="cx">     {
</span><del>-        var childrenToRemove = this.children;
-
-        var treeOutline = this.treeOutline;
-
-        var child = this.children[0];
</del><ins>+        let childrenToRemove = this.children;
+        let child = this.children[0];
</ins><span class="cx">         while (child) {
</span><span class="cx">             if (child.children.length)
</span><span class="cx">                 childrenToRemove = childrenToRemove.concat(child.children);
</span><span class="cx">             child = child.traverseNextTreeElement(false, this, true);
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        for (var i = 0; i &lt; childrenToRemove.length; ++i) {
</del><ins>+        for (let child of childrenToRemove) {
</ins><span class="cx">             child = childrenToRemove[i];
</span><span class="cx">             child.deselect(suppressOnDeselect);
</span><span class="cx"> 
</span><del>-            if (child.treeOutline)
-                child.treeOutline._forgetTreeElement(child);
</del><ins>+            let treeOutline = child.treeOutline;
+            if (treeOutline)
+                treeOutline._forgetTreeElement(child);
</ins><span class="cx"> 
</span><span class="cx">             child._detach();
</span><span class="cx">             child.children = [];
</span><span class="lines">@@ -258,8 +255,8 @@
</span><span class="cx">             child.nextSibling = null;
</span><span class="cx">             child.previousSibling = null;
</span><span class="cx"> 
</span><del>-            if (treeOutline &amp;&amp; treeOutline.onremove)
-                treeOutline.onremove(child);
</del><ins>+            if (treeOutline)
+                treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementRemoved, {element: child});
</ins><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this.children = [];
</span><span class="lines">@@ -371,8 +368,7 @@
</span><span class="cx">         if (treeElement.treeOutline !== this)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        if (this.onchange)
-            this.onchange(treeElement);
</del><ins>+        this.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementDidChange, {element: treeElement});
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     treeElementFromNode(node)
</span><span class="lines">@@ -519,6 +515,15 @@
</span><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span><ins>+WebInspector.TreeOutline.Event = {
+    ElementAdded: Symbol(&quot;element-added&quot;),
+    ElementDidChange: Symbol(&quot;element-did-change&quot;),
+    ElementRemoved: Symbol(&quot;element-removed&quot;),
+    ElementDisclosureDidChanged: Symbol(&quot;element-disclosure-did-change&quot;),
+    ElementVisibilityDidChange: Symbol(&quot;element-visbility-did-change&quot;),
+    SelectionDidChange: Symbol(&quot;selection-did-change&quot;)
+};
+
</ins><span class="cx"> WebInspector.TreeOutline._knownTreeElementNextIdentifier = 1;
</span><span class="cx"> 
</span><span class="cx"> WebInspector.TreeElement = class TreeElement extends WebInspector.Object
</span><span class="lines">@@ -581,11 +586,6 @@
</span><span class="cx">         return this._listItemNode;
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    get childrenListElement()
-    {
-        return this._childrenListNode;
-    }
-
</del><span class="cx">     get title()
</span><span class="cx">     {
</span><span class="cx">         return this._title;
</span><span class="lines">@@ -671,8 +671,8 @@
</span><span class="cx">                 this._childrenListNode.classList.remove(&quot;hidden&quot;);
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        if (this.treeOutline &amp;&amp; this.treeOutline.onhidden)
-            this.treeOutline.onhidden(this, x);
</del><ins>+        if (this.treeOutline)
+            this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementVisibilityDidChange, {element: this});
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     get shouldRefreshChildren()
</span><span class="lines">@@ -842,8 +842,8 @@
</span><span class="cx">         if (this.oncollapse)
</span><span class="cx">             this.oncollapse(this);
</span><span class="cx"> 
</span><del>-        if (this.treeOutline &amp;&amp; this.treeOutline.oncollapse)
-            this.treeOutline.oncollapse(this);
</del><ins>+        if (this.treeOutline)
+            this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementDisclosureDidChanged, {element: this});
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     collapseRecursively()
</span><span class="lines">@@ -861,9 +861,9 @@
</span><span class="cx">         if (this.expanded &amp;&amp; !this._shouldRefreshChildren &amp;&amp; this._childrenListNode)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        // Set this before onpopulate. Since onpopulate can add elements and call onadd, this makes
-        // sure the expanded flag is true before calling those functions. This prevents the possibility
-        // of an infinite loop if onpopulate or onadd were to call expand.
</del><ins>+        // Set this before onpopulate. Since onpopulate can add elements and dispatch an ElementAdded event,
+        // this makes sure the expanded flag is true before calling those functions. This prevents the
+        // possibility of an infinite loop if onpopulate or an event handler were to call expand.
</ins><span class="cx"> 
</span><span class="cx">         this.expanded = true;
</span><span class="cx">         if (this.treeOutline)
</span><span class="lines">@@ -904,8 +904,8 @@
</span><span class="cx">         if (this.onexpand)
</span><span class="cx">             this.onexpand(this);
</span><span class="cx"> 
</span><del>-        if (this.treeOutline &amp;&amp; this.treeOutline.onexpand)
-            this.treeOutline.onexpand(this);
</del><ins>+        if (this.treeOutline)
+            this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementDisclosureDidChanged, {element: this});
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     expandRecursively(maxDepth)
</span><span class="lines">@@ -990,12 +990,19 @@
</span><span class="cx">             this.treeOutline._childrenListNode.focus();
</span><span class="cx"> 
</span><span class="cx">         // Focusing on another node may detach &quot;this&quot; from tree.
</span><del>-        var treeOutline = this.treeOutline;
</del><ins>+        let treeOutline = this.treeOutline;
</ins><span class="cx">         if (!treeOutline)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="cx">         treeOutline.processingSelectionChange = true;
</span><span class="cx"> 
</span><ins>+        // Prevent dispatching a SelectionDidChange event for the deselected element if
+        // it will be dispatched for the selected element. The event data includes both
+        // the selected and deselected elements, so one event is.
+        if (!suppressOnSelect)
+            suppressOnDeselect = true;
+
+        let deselectedElement = treeOutline.selectedTreeElement;
</ins><span class="cx">         if (!this.selected) {
</span><span class="cx">             if (treeOutline.selectedTreeElement)
</span><span class="cx">                 treeOutline.selectedTreeElement.deselect(suppressOnDeselect);
</span><span class="lines">@@ -1007,11 +1014,12 @@
</span><span class="cx">                 this._listItemNode.classList.add(&quot;selected&quot;);
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        if (this.onselect &amp;&amp; !suppressOnSelect)
-            this.onselect(this, selectedByUser);
</del><ins>+        if (!suppressOnSelect) {
+            if (this.onselect)
+                this.onselect(this, selectedByUser);
</ins><span class="cx"> 
</span><del>-        if (treeOutline.onselect &amp;&amp; !suppressOnSelect)
-            treeOutline.onselect(this, selectedByUser);
</del><ins>+            treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.SelectionDidChange, {selectedElement: this, deselectedElement, selectedByUser});
+        }
</ins><span class="cx"> 
</span><span class="cx">         treeOutline.processingSelectionChange = false;
</span><span class="cx">     }
</span><span class="lines">@@ -1033,11 +1041,12 @@
</span><span class="cx">         if (this._listItemNode)
</span><span class="cx">             this._listItemNode.classList.remove(&quot;selected&quot;);
</span><span class="cx"> 
</span><del>-        if (this.ondeselect &amp;&amp; !suppressOnDeselect)
-            this.ondeselect(this);
</del><ins>+        if (!suppressOnDeselect) {
+            if (this.ondeselect)
+                this.ondeselect(this);
</ins><span class="cx"> 
</span><del>-        if (this.treeOutline.ondeselect &amp;&amp; !suppressOnDeselect)
-            this.treeOutline.ondeselect(this);
</del><ins>+            this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.SelectionDidChange, {deselectedElement: this});
+        }
</ins><span class="cx"> 
</span><span class="cx">         return true;
</span><span class="cx">     }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlineDataGridSynchronizerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutlineDataGridSynchronizer.js (192935 => 192936)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutlineDataGridSynchronizer.js        2015-12-02 01:37:19 UTC (rev 192935)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutlineDataGridSynchronizer.js        2015-12-02 01:37:38 UTC (rev 192936)
</span><span class="lines">@@ -49,49 +49,11 @@
</span><span class="cx">         this._treeOutline.element.addEventListener(&quot;focus&quot;, this._treeOutlineGainedFocus.bind(this));
</span><span class="cx">         this._treeOutline.element.addEventListener(&quot;blur&quot;, this._treeOutlineLostFocus.bind(this));
</span><span class="cx"> 
</span><del>-        // FIXME: This is a hack. TreeOutline should just dispatch events via WebInspector.Object.
-        var existingOnAdd = treeOutline.onadd;
-        var existingOnRemove = treeOutline.onremove;
-        var existingOnExpand = treeOutline.onexpand;
-        var existingOnCollapse = treeOutline.oncollapse;
-        var existingOnHidden = treeOutline.onhidden;
-        var existingOnSelect = treeOutline.onselect;
-
-        treeOutline.onadd = function(element) {
-            this._treeElementAdded(element);
-            if (existingOnAdd)
-                existingOnAdd.call(treeOutline, element);
-        }.bind(this);
-
-        treeOutline.onremove = function(element) {
-            this._treeElementRemoved(element);
-            if (existingOnRemove)
-                existingOnRemove.call(treeOutline, element);
-        }.bind(this);
-
-        treeOutline.onexpand = function(element) {
-            this._treeElementExpanded(element);
-            if (existingOnExpand)
-                existingOnExpand.call(treeOutline, element);
-        }.bind(this);
-
-        treeOutline.oncollapse = function(element) {
-            this._treeElementCollapsed(element);
-            if (existingOnCollapse)
-                existingOnCollapse.call(treeOutline, element);
-        }.bind(this);
-
-        treeOutline.onhidden = function(element, hidden) {
-            this._treeElementHiddenChanged(element, hidden);
-            if (existingOnHidden)
-                existingOnHidden.call(treeOutline, element, hidden);
-        }.bind(this);
-
-        treeOutline.onselect = function(element, selectedByUser) {
-            this._treeElementSelected(element, selectedByUser);
-            if (existingOnSelect)
-                existingOnSelect.call(treeOutline, element, selectedByUser);
-        }.bind(this);
</del><ins>+        treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementAdded, this._treeElementAdded, this);
+        treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementRemoved, this._treeElementRemoved, this);
+        treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementDisclosureDidChanged, this._treeElementDisclosureDidChange, this);
+        treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementVisibilityDidChange, this._treeElementVisibilityDidChange, this);
+        treeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="lines">@@ -243,27 +205,36 @@
</span><span class="cx">         this._dataGrid.element.classList.remove(&quot;force-focus&quot;);
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _treeElementSelected(treeElement, selectedByUser)
</del><ins>+    _treeSelectionDidChange(event)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        var dataGridNode = treeElement.__dataGridNode;
</del><ins>+        let treeElement = event.data.selectedElement || event.data.deselectedElement;
+        console.assert(treeElement);
+        if (!treeElement)
+            return;
+
+        let dataGridNode = treeElement.__dataGridNode;
</ins><span class="cx">         console.assert(dataGridNode);
</span><span class="cx"> 
</span><del>-        dataGridNode.select(true);
</del><ins>+        if (event.data.selectedElement)
+            dataGridNode.select();
+        else
+            dataGridNode.deselect();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _treeElementAdded(treeElement)
</del><ins>+    _treeElementAdded(event)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        var dataGridNode = this.dataGridNodeForTreeElement(treeElement);
</del><ins>+        let treeElement = event.data.element;
+        let dataGridNode = this.dataGridNodeForTreeElement(treeElement);
</ins><span class="cx">         console.assert(dataGridNode);
</span><span class="cx"> 
</span><span class="cx">         var parentDataGridNode = treeElement.parent.__dataGridNode;
</span><del>-        console.assert(dataGridNode);
</del><ins>+        console.assert(parentDataGridNode);
</ins><span class="cx"> 
</span><span class="cx">         var childIndex = treeElement.parent.children.indexOf(treeElement);
</span><span class="cx">         console.assert(childIndex !== -1);
</span><span class="lines">@@ -271,50 +242,43 @@
</span><span class="cx">         parentDataGridNode.insertChild(dataGridNode, childIndex);
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _treeElementRemoved(treeElement)
</del><ins>+    _treeElementRemoved(event)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        var dataGridNode = treeElement.__dataGridNode;
</del><ins>+        let treeElement = event.data.element;
+        let dataGridNode = treeElement.__dataGridNode;
</ins><span class="cx">         console.assert(dataGridNode);
</span><span class="cx"> 
</span><span class="cx">         if (dataGridNode.parent)
</span><span class="cx">             dataGridNode.parent.removeChild(dataGridNode);
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _treeElementExpanded(treeElement)
</del><ins>+    _treeElementDisclosureDidChange(event)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        var dataGridNode = treeElement.__dataGridNode;
</del><ins>+        let treeElement = event.data.element;
+        let dataGridNode = treeElement.__dataGridNode;
</ins><span class="cx">         console.assert(dataGridNode);
</span><span class="cx"> 
</span><del>-        if (!dataGridNode.expanded)
</del><ins>+        if (treeElement.expanded)
</ins><span class="cx">             dataGridNode.expand();
</span><del>-    }
-
-    _treeElementCollapsed(treeElement)
-    {
-        if (!this._enabled)
-            return;
-
-        var dataGridNode = treeElement.__dataGridNode;
-        console.assert(dataGridNode);
-
-        if (dataGridNode.expanded)
</del><ins>+        else
</ins><span class="cx">             dataGridNode.collapse();
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _treeElementHiddenChanged(treeElement, hidden)
</del><ins>+    _treeElementVisibilityDidChange(event)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        var dataGridNode = treeElement.__dataGridNode;
</del><ins>+        let treeElement = event.data.element;
+        let dataGridNode = treeElement.__dataGridNode;
</ins><span class="cx">         console.assert(dataGridNode);
</span><span class="cx"> 
</span><del>-        dataGridNode.element.classList.toggle(&quot;hidden&quot;, hidden);
</del><ins>+        dataGridNode.element.classList.toggle(&quot;hidden&quot;, treeElement.hidden);
</ins><span class="cx">     }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleCommaSeparatedKeywordEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js (192935 => 192936)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js        2015-12-02 01:37:19 UTC (rev 192935)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js        2015-12-02 01:37:38 UTC (rev 192936)
</span><span class="lines">@@ -38,7 +38,7 @@
</span><span class="cx">         this.contentElement.appendChild(listElement);
</span><span class="cx"> 
</span><span class="cx">         this._commaSeparatedKeywords = new WebInspector.TreeOutline(listElement);
</span><del>-        this._commaSeparatedKeywords.onselect = this._treeElementSelected.bind(this);
</del><ins>+        this._commaSeparatedKeywords.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
</ins><span class="cx"> 
</span><span class="cx">         let controlContainer = document.createElement(&quot;div&quot;);
</span><span class="cx">         controlContainer.classList.add(&quot;visual-style-comma-separated-keyword-controls&quot;);
</span><span class="lines">@@ -185,10 +185,14 @@
</span><span class="cx">             this._removeSelectedCommaSeparatedKeyword();
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _treeElementSelected(item, selectedByUser)
</del><ins>+    _treeSelectionDidChange(event)
</ins><span class="cx">     {
</span><ins>+        let treeElement = event.data.selectedElement;
+        if (!treeElement)
+            return;
+
</ins><span class="cx">         this._removeEmptyCommaSeparatedKeywords();
</span><del>-        this.dispatchEventToListeners(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, {text: item.mainTitle});
</del><ins>+        this.dispatchEventToListeners(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, {text: treeElement.mainTitle});
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _treeElementIsEmpty(item)
</span></span></pre>
</div>
</div>

</body>
</html>