<!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>[182042] 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/182042">182042</a></dd>
<dt>Author</dt> <dd>timothy@apple.com</dd>
<dt>Date</dt> <dd>2015-03-26 16:38:12 -0700 (Thu, 26 Mar 2015)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: Convert TreeElement classes to ES6
https://bugs.webkit.org/show_bug.cgi?id=143111

Reviewed by Joseph Pecoraro.

* UserInterface/Views/ApplicationCacheFrameTreeElement.js:
* UserInterface/Views/ApplicationCacheManifestTreeElement.js:
* UserInterface/Views/BreakpointTreeElement.js:
* UserInterface/Views/CallFrameTreeElement.js:
* UserInterface/Views/ContentFlowTreeElement.js:
* UserInterface/Views/CookieStorageTreeElement.js:
* UserInterface/Views/DOMStorageTreeElement.js:
* UserInterface/Views/DOMTreeElement.js:
* UserInterface/Views/DOMTreeOutline.js:
* UserInterface/Views/DatabaseHostTreeElement.js:
* UserInterface/Views/DatabaseTableTreeElement.js:
* UserInterface/Views/DatabaseTreeElement.js:
* UserInterface/Views/FolderTreeElement.js:
* UserInterface/Views/FolderizedTreeElement.js:
* UserInterface/Views/FrameTreeElement.js:
* UserInterface/Views/GeneralTreeElement.js:
* UserInterface/Views/IndexedDatabaseHostTreeElement.js:
* UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js:
* UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js:
* UserInterface/Views/IndexedDatabaseTreeElement.js:
* UserInterface/Views/LegacyConsoleMessageImpl.js:
* UserInterface/Views/LogTreeElement.js:
* UserInterface/Views/NavigationSidebarPanel.js:
* UserInterface/Views/ObjectTreeArrayIndexTreeElement.js:
* UserInterface/Views/ObjectTreeBaseTreeElement.js:
* UserInterface/Views/ObjectTreeMapEntryTreeElement.js:
* UserInterface/Views/ObjectTreePropertyTreeElement.js:
* UserInterface/Views/ObjectTreeSetIndexTreeElement.js:
* UserInterface/Views/ObjectTreeView.js:
* UserInterface/Views/ProfileNodeTreeElement.js:
* UserInterface/Views/PropertiesSection.js:
* UserInterface/Views/ResourceTreeElement.js:
* UserInterface/Views/ScriptTreeElement.js:
* UserInterface/Views/SearchResultTreeElement.js:
* UserInterface/Views/SourceCodeTimelineTreeElement.js:
* UserInterface/Views/SourceCodeTreeElement.js:
* UserInterface/Views/SourceMapResourceTreeElement.js:
* UserInterface/Views/StorageTreeElement.js:
* UserInterface/Views/TimelineDataGrid.js:
* UserInterface/Views/TimelineRecordTreeElement.js:
* UserInterface/Views/TreeElementStatusButton.js:
* UserInterface/Views/TreeOutline.js:
* UserInterface/Views/TreeOutlineDataGridSynchronizer.js:
* UserInterface/Views/TypePropertiesSection.js:
Converted to ES6 classes where possible.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsApplicationCacheFrameTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsApplicationCacheManifestTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheManifestTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsBreakpointTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCallFrameTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsContentFlowTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCookieStorageTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/CookieStorageTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMStorageTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMStorageTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinejs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDatabaseHostTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseHostTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDatabaseTableTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDatabaseTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFolderTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFolderizedTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/FolderizedTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFrameTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/FrameTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsGeneralTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsIndexedDatabaseHostTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseHostTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsIndexedDatabaseObjectStoreIndexTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsIndexedDatabaseObjectStoreTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsIndexedDatabaseTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLegacyConsoleMessageImpljs">trunk/Source/WebInspectorUI/UserInterface/Views/LegacyConsoleMessageImpl.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLogTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeArrayIndexTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeBaseTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeMapEntryTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeMapEntryTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectTreePropertyTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeSetIndexTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeSetIndexTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsProfileNodeTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsPropertiesSectionjs">trunk/Source/WebInspectorUI/UserInterface/Views/PropertiesSection.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsScriptTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSearchResultTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSourceCodeTimelineTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSourceCodeTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSourceMapResourceTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/SourceMapResourceTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsStorageTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineDataGridjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTreeElementStatusButtonjs">trunk/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.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="#trunkSourceWebInspectorUIUserInterfaceViewsTypePropertiesSectionjs">trunk/Source/WebInspectorUI/UserInterface/Views/TypePropertiesSection.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/ChangeLog        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,58 @@
</span><span class="cx"> 2015-03-26  Timothy Hatcher  &lt;timothy@apple.com&gt;
</span><span class="cx"> 
</span><ins>+        Web Inspector: Convert TreeElement classes to ES6
+        https://bugs.webkit.org/show_bug.cgi?id=143111
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Views/ApplicationCacheFrameTreeElement.js:
+        * UserInterface/Views/ApplicationCacheManifestTreeElement.js:
+        * UserInterface/Views/BreakpointTreeElement.js:
+        * UserInterface/Views/CallFrameTreeElement.js:
+        * UserInterface/Views/ContentFlowTreeElement.js:
+        * UserInterface/Views/CookieStorageTreeElement.js:
+        * UserInterface/Views/DOMStorageTreeElement.js:
+        * UserInterface/Views/DOMTreeElement.js:
+        * UserInterface/Views/DOMTreeOutline.js:
+        * UserInterface/Views/DatabaseHostTreeElement.js:
+        * UserInterface/Views/DatabaseTableTreeElement.js:
+        * UserInterface/Views/DatabaseTreeElement.js:
+        * UserInterface/Views/FolderTreeElement.js:
+        * UserInterface/Views/FolderizedTreeElement.js:
+        * UserInterface/Views/FrameTreeElement.js:
+        * UserInterface/Views/GeneralTreeElement.js:
+        * UserInterface/Views/IndexedDatabaseHostTreeElement.js:
+        * UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js:
+        * UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js:
+        * UserInterface/Views/IndexedDatabaseTreeElement.js:
+        * UserInterface/Views/LegacyConsoleMessageImpl.js:
+        * UserInterface/Views/LogTreeElement.js:
+        * UserInterface/Views/NavigationSidebarPanel.js:
+        * UserInterface/Views/ObjectTreeArrayIndexTreeElement.js:
+        * UserInterface/Views/ObjectTreeBaseTreeElement.js:
+        * UserInterface/Views/ObjectTreeMapEntryTreeElement.js:
+        * UserInterface/Views/ObjectTreePropertyTreeElement.js:
+        * UserInterface/Views/ObjectTreeSetIndexTreeElement.js:
+        * UserInterface/Views/ObjectTreeView.js:
+        * UserInterface/Views/ProfileNodeTreeElement.js:
+        * UserInterface/Views/PropertiesSection.js:
+        * UserInterface/Views/ResourceTreeElement.js:
+        * UserInterface/Views/ScriptTreeElement.js:
+        * UserInterface/Views/SearchResultTreeElement.js:
+        * UserInterface/Views/SourceCodeTimelineTreeElement.js:
+        * UserInterface/Views/SourceCodeTreeElement.js:
+        * UserInterface/Views/SourceMapResourceTreeElement.js:
+        * UserInterface/Views/StorageTreeElement.js:
+        * UserInterface/Views/TimelineDataGrid.js:
+        * UserInterface/Views/TimelineRecordTreeElement.js:
+        * UserInterface/Views/TreeElementStatusButton.js:
+        * UserInterface/Views/TreeOutline.js:
+        * UserInterface/Views/TreeOutlineDataGridSynchronizer.js:
+        * UserInterface/Views/TypePropertiesSection.js:
+        Converted to ES6 classes where possible.
+
+2015-03-26  Timothy Hatcher  &lt;timothy@apple.com&gt;
+
</ins><span class="cx">         Web Inspector: Convert sidebar classes to ES6
</span><span class="cx">         https://bugs.webkit.org/show_bug.cgi?id=143108
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsApplicationCacheFrameTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,23 +23,20 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.ApplicationCacheFrameTreeElement = function(representedObject)
</del><ins>+WebInspector.ApplicationCacheFrameTreeElement = class ApplicationCacheFrameTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(representedObject instanceof WebInspector.ApplicationCacheFrame);
</del><ins>+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.ApplicationCacheFrame);
</ins><span class="cx"> 
</span><del>-    WebInspector.GeneralTreeElement.call(this, WebInspector.ApplicationCacheFrameTreeElement.StyleClassName, &quot;&quot;, &quot;&quot;, representedObject, false);
</del><ins>+        super(&quot;application-cache-frame&quot;, &quot;&quot;, &quot;&quot;, representedObject, false);
</ins><span class="cx"> 
</span><del>-    this.small = true;
</del><ins>+        this.small = true;
</ins><span class="cx"> 
</span><del>-    this.updateTitles();
-};
</del><ins>+        this.updateTitles();
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.ApplicationCacheFrameTreeElement.StyleClassName = &quot;application-cache-frame&quot;;
-
-WebInspector.ApplicationCacheFrameTreeElement.prototype = {
-    constructor: WebInspector.ApplicationCacheFrameTreeElement,
-
-    updateTitles: function()
</del><ins>+    updateTitles()
</ins><span class="cx">     {
</span><span class="cx">         var url = this.representedObject.frame.url;
</span><span class="cx">         var parsedURL = parseURL(url);
</span><span class="lines">@@ -57,5 +54,3 @@
</span><span class="cx">         this.subtitle = subtitleIsDuplicate ? null : subtitle;
</span><span class="cx">     }
</span><span class="cx"> };
</span><del>-
-WebInspector.ApplicationCacheFrameTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsApplicationCacheManifestTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheManifestTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheManifestTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheManifestTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,18 +23,15 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.ApplicationCacheManifestTreeElement = function(representedObject)
</del><ins>+WebInspector.ApplicationCacheManifestTreeElement = class ApplicationCacheManifestTreeElement extends WebInspector.StorageTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(representedObject instanceof WebInspector.ApplicationCacheManifest);
</del><ins>+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.ApplicationCacheManifest);
</ins><span class="cx"> 
</span><del>-    WebInspector.StorageTreeElement.call(this, WebInspector.ApplicationCacheManifestTreeElement.StyleClassName, &quot;&quot;, representedObject);
-};
</del><ins>+        super(&quot;application-cache-manifest&quot;, &quot;&quot;, representedObject);
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.ApplicationCacheManifestTreeElement.StyleClassName = &quot;application-cache-manifest&quot;;
-
-WebInspector.ApplicationCacheManifestTreeElement.prototype = {
-    constructor: WebInspector.ApplicationCacheManifestTreeElement,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get name()
</span><span class="lines">@@ -43,7 +40,7 @@
</span><span class="cx">             this._generateTitles();
</span><span class="cx"> 
</span><span class="cx">         return this._name;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get secondaryName()
</span><span class="cx">     {
</span><span class="lines">@@ -51,14 +48,14 @@
</span><span class="cx">             this._generateTitles();
</span><span class="cx"> 
</span><span class="cx">         return this._secondaryName;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get categoryName()
</span><span class="cx">     {
</span><span class="cx">         return WebInspector.UIString(&quot;Application Cache&quot;);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _generateTitles: function()
</del><ins>+    _generateTitles()
</ins><span class="cx">     {
</span><span class="cx">         var parsedURL = parseURL(this.representedObject.manifestURL);
</span><span class="cx"> 
</span><span class="lines">@@ -70,5 +67,3 @@
</span><span class="cx">         this._secondaryName = this._name !== secondaryName ? secondaryName : null;
</span><span class="cx">     }
</span><span class="cx"> };
</span><del>-
-WebInspector.ApplicationCacheManifestTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsBreakpointTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,100 +23,87 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.BreakpointTreeElement = function(breakpoint, className, title)
</del><ins>+WebInspector.BreakpointTreeElement = class BreakpointTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(breakpoint instanceof WebInspector.Breakpoint);
</del><ins>+    constructor(breakpoint, className, title)
+    {
+        console.assert(breakpoint instanceof WebInspector.Breakpoint);
</ins><span class="cx"> 
</span><del>-    if (!className)
-        className = WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName;
</del><ins>+        if (!className)
+            className = WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName;
</ins><span class="cx"> 
</span><del>-    WebInspector.GeneralTreeElement.call(this, [WebInspector.BreakpointTreeElement.StyleClassName, className], title, null, breakpoint, false);
</del><ins>+        super([&quot;breakpoint&quot;, className], title, null, breakpoint, false);
</ins><span class="cx"> 
</span><del>-    this._breakpoint = breakpoint;
</del><ins>+        this._breakpoint = breakpoint;
</ins><span class="cx"> 
</span><del>-    this._listeners = new WebInspector.EventListenerSet(this, &quot;BreakpointTreeElement listeners&quot;);
-    if (!title)
-        this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange);
-    this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus);
-    this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateStatus);
-    this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus);
-    this._listeners.register(WebInspector.debuggerManager, WebInspector.DebuggerManager.Event.BreakpointsEnabledDidChange, this._updateStatus);
</del><ins>+        this._listeners = new WebInspector.EventListenerSet(this, &quot;BreakpointTreeElement listeners&quot;);
+        if (!title)
+            this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange);
+        this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus);
+        this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateStatus);
+        this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus);
+        this._listeners.register(WebInspector.debuggerManager, WebInspector.DebuggerManager.Event.BreakpointsEnabledDidChange, this._updateStatus);
</ins><span class="cx"> 
</span><del>-    this._listeners.register(WebInspector.probeManager, WebInspector.ProbeManager.Event.ProbeSetAdded, this._probeSetAdded);
-    this._listeners.register(WebInspector.probeManager, WebInspector.ProbeManager.Event.ProbeSetRemoved, this._probeSetRemoved);
</del><ins>+        this._listeners.register(WebInspector.probeManager, WebInspector.ProbeManager.Event.ProbeSetAdded, this._probeSetAdded);
+        this._listeners.register(WebInspector.probeManager, WebInspector.ProbeManager.Event.ProbeSetRemoved, this._probeSetRemoved);
</ins><span class="cx"> 
</span><del>-    this._statusImageElement = document.createElement(&quot;img&quot;);
-    this._statusImageElement.className = WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName;
-    this._listeners.register(this._statusImageElement, &quot;mousedown&quot;, this._statusImageElementMouseDown);
-    this._listeners.register(this._statusImageElement, &quot;click&quot;, this._statusImageElementClicked);
</del><ins>+        this._statusImageElement = document.createElement(&quot;img&quot;);
+        this._statusImageElement.className = WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName;
+        this._listeners.register(this._statusImageElement, &quot;mousedown&quot;, this._statusImageElementMouseDown);
+        this._listeners.register(this._statusImageElement, &quot;click&quot;, this._statusImageElementClicked);
</ins><span class="cx"> 
</span><del>-    if (!title)
-        this._updateTitles();
-    this._updateStatus();
</del><ins>+        if (!title)
+            this._updateTitles();
+        this._updateStatus();
</ins><span class="cx"> 
</span><del>-    this.status = this._statusImageElement;
-    this.small = true;
</del><ins>+        this.status = this._statusImageElement;
+        this.small = true;
</ins><span class="cx"> 
</span><del>-    this._iconAnimationLayerElement = document.createElement(&quot;span&quot;);
-    this.iconElement.appendChild(this._iconAnimationLayerElement);
-};
</del><ins>+        this._iconAnimationLayerElement = document.createElement(&quot;span&quot;);
+        this.iconElement.appendChild(this._iconAnimationLayerElement);
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName = &quot;breakpoint-generic-line-icon&quot;;
-WebInspector.BreakpointTreeElement.StyleClassName = &quot;breakpoint&quot;;
-WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName = &quot;status-image&quot;;
-WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName = &quot;resolved&quot;;
-WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName = &quot;auto-continue&quot;;
-WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName = &quot;disabled&quot;;
-WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName = &quot;formatted-location&quot;;
-WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName = &quot;data-updated&quot;;
-
-WebInspector.BreakpointTreeElement.ProbeDataUpdatedAnimationDuration = 400; // milliseconds
-
-
-WebInspector.BreakpointTreeElement.prototype = {
-    constructor: WebInspector.BreakpointTreeElement,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get breakpoint()
</span><span class="cx">     {
</span><span class="cx">         return this._breakpoint;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get filterableData()
</span><span class="cx">     {
</span><span class="cx">         return {text: this.breakpoint.url};
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    ondelete: function()
</del><ins>+    ondelete()
</ins><span class="cx">     {
</span><span class="cx">         if (!WebInspector.debuggerManager.isBreakpointRemovable(this._breakpoint))
</span><span class="cx">             return false;
</span><span class="cx"> 
</span><span class="cx">         WebInspector.debuggerManager.removeBreakpoint(this._breakpoint);
</span><span class="cx">         return true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onenter: function()
</del><ins>+    onenter()
</ins><span class="cx">     {
</span><span class="cx">         this._breakpoint.cycleToNextMode();
</span><span class="cx">         return true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onspace: function()
</del><ins>+    onspace()
</ins><span class="cx">     {
</span><span class="cx">         this._breakpoint.cycleToNextMode();
</span><span class="cx">         return true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    oncontextmenu: function(event)
</del><ins>+    oncontextmenu(event)
</ins><span class="cx">     {
</span><span class="cx">         var contextMenu = new WebInspector.ContextMenu(event);
</span><span class="cx">         this._breakpoint.appendContextMenuItems(contextMenu, this._statusImageElement);
</span><span class="cx">         contextMenu.show();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onattach: function()
</del><ins>+    onattach()
</ins><span class="cx">     {
</span><span class="cx">         WebInspector.GeneralTreeElement.prototype.onattach.call(this);
</span><span class="cx"> 
</span><span class="lines">@@ -125,9 +112,9 @@
</span><span class="cx">         for (var probeSet of WebInspector.probeManager.probeSets)
</span><span class="cx">             if (probeSet.breakpoint === this._breakpoint)
</span><span class="cx">                 this._addProbeSet(probeSet);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    ondetach: function()
</del><ins>+    ondetach()
</ins><span class="cx">     {
</span><span class="cx">         WebInspector.GeneralTreeElement.prototype.ondetach.call(this);
</span><span class="cx"> 
</span><span class="lines">@@ -135,17 +122,17 @@
</span><span class="cx"> 
</span><span class="cx">         if (this._probeSet)
</span><span class="cx">             this._removeProbeSet(this._probeSet);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    removeStatusImage: function()
</del><ins>+    removeStatusImage()
</ins><span class="cx">     {
</span><span class="cx">         this._statusImageElement.remove();
</span><span class="cx">         this._statusImageElement = null;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span><del>-    _updateTitles: function()
</del><ins>+    _updateTitles()
</ins><span class="cx">     {
</span><span class="cx">         var sourceCodeLocation = this._breakpoint.sourceCodeLocation;
</span><span class="cx"> 
</span><span class="lines">@@ -166,9 +153,9 @@
</span><span class="cx"> 
</span><span class="cx">             this.tooltip = this.mainTitle + &quot; \u2014 &quot; + WebInspector.UIString(&quot;originally %s&quot;).format(sourceCodeLocation.originalLocationString());
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _updateStatus: function()
</del><ins>+    _updateStatus()
</ins><span class="cx">     {
</span><span class="cx">         if (!this._statusImageElement)
</span><span class="cx">             return;
</span><span class="lines">@@ -187,9 +174,9 @@
</span><span class="cx">             this._statusImageElement.classList.add(WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName);
</span><span class="cx">         else
</span><span class="cx">             this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _addProbeSet: function(probeSet)
</del><ins>+    _addProbeSet(probeSet)
</ins><span class="cx">     {
</span><span class="cx">         console.assert(probeSet instanceof WebInspector.ProbeSet);
</span><span class="cx">         console.assert(probeSet.breakpoint === this._breakpoint);
</span><span class="lines">@@ -198,9 +185,9 @@
</span><span class="cx">         this._probeSet = probeSet;
</span><span class="cx">         probeSet.addEventListener(WebInspector.ProbeSet.Event.SamplesCleared, this._samplesCleared, this);
</span><span class="cx">         probeSet.dataTable.addEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _removeProbeSet: function(probeSet)
</del><ins>+    _removeProbeSet(probeSet)
</ins><span class="cx">     {
</span><span class="cx">         console.assert(probeSet instanceof WebInspector.ProbeSet);
</span><span class="cx">         console.assert(probeSet === this._probeSet);
</span><span class="lines">@@ -208,32 +195,32 @@
</span><span class="cx">         probeSet.removeEventListener(WebInspector.ProbeSet.Event.SamplesCleared, this._samplesCleared, this);
</span><span class="cx">         probeSet.dataTable.removeEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
</span><span class="cx">         delete this._probeSet;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _probeSetAdded: function(event)
</del><ins>+    _probeSetAdded(event)
</ins><span class="cx">     {
</span><span class="cx">         var probeSet = event.data.probeSet;
</span><span class="cx">         if (probeSet.breakpoint === this._breakpoint)
</span><span class="cx">             this._addProbeSet(probeSet);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _probeSetRemoved: function(event)
</del><ins>+    _probeSetRemoved(event)
</ins><span class="cx">     {
</span><span class="cx">         var probeSet = event.data.probeSet;
</span><span class="cx">         if (probeSet.breakpoint === this._breakpoint)
</span><span class="cx">             this._removeProbeSet(probeSet);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _samplesCleared: function(event)
</del><ins>+    _samplesCleared(event)
</ins><span class="cx">     {
</span><span class="cx">         console.assert(this._probeSet);
</span><span class="cx"> 
</span><span class="cx">         var oldTable = event.data.oldTable;
</span><span class="cx">         oldTable.removeEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
</span><span class="cx">         this._probeSet.dataTable.addEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _dataUpdated: function()
</del><ins>+    _dataUpdated()
</ins><span class="cx">     {
</span><span class="cx">         if (this.element.classList.contains(WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName)) {
</span><span class="cx">             clearTimeout(this._removeIconAnimationTimeoutIdentifier);
</span><span class="lines">@@ -248,10 +235,10 @@
</span><span class="cx">         this._removeIconAnimationTimeoutIdentifier = setTimeout(function() {
</span><span class="cx">             this.element.classList.remove(WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName);
</span><span class="cx">         }.bind(this), WebInspector.BreakpointTreeElement.ProbeDataUpdatedAnimationDuration);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx"> 
</span><del>-    _breakpointLocationDidChange: function(event)
</del><ins>+    _breakpointLocationDidChange(event)
</ins><span class="cx">     {
</span><span class="cx">         console.assert(event.target === this._breakpoint);
</span><span class="cx"> 
</span><span class="lines">@@ -260,18 +247,26 @@
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="cx">         this._updateTitles();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _statusImageElementMouseDown: function(event)
</del><ins>+    _statusImageElementMouseDown(event)
</ins><span class="cx">     {
</span><span class="cx">         // To prevent the tree element from selecting.
</span><span class="cx">         event.stopPropagation();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _statusImageElementClicked: function(event)
</del><ins>+    _statusImageElementClicked(event)
</ins><span class="cx">     {
</span><span class="cx">         this._breakpoint.cycleToNextMode();
</span><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span><del>-WebInspector.BreakpointTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
</del><ins>+WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName = &quot;breakpoint-generic-line-icon&quot;;
+WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName = &quot;status-image&quot;;
+WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName = &quot;resolved&quot;;
+WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName = &quot;auto-continue&quot;;
+WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName = &quot;disabled&quot;;
+WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName = &quot;formatted-location&quot;;
+WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName = &quot;data-updated&quot;;
+
+WebInspector.BreakpointTreeElement.ProbeDataUpdatedAnimationDuration = 400; // milliseconds
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCallFrameTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,55 +23,50 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.CallFrameTreeElement = function(callFrame)
</del><ins>+WebInspector.CallFrameTreeElement = class CallFrameTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(callFrame instanceof WebInspector.CallFrame);
</del><ins>+    constructor(callFrame)
+    {
+        console.assert(callFrame instanceof WebInspector.CallFrame);
</ins><span class="cx"> 
</span><del>-    var className = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
-    if (callFrame.nativeCode)
-        className = WebInspector.CallFrameTreeElement.NativeIconStyleClassName;
</del><ins>+        var className = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
+        if (callFrame.nativeCode)
+            className = WebInspector.CallFrameTreeElement.NativeIconStyleClassName;
</ins><span class="cx"> 
</span><del>-    // This is more than likely an event listener function with an &quot;on&quot; prefix and it is
-    // as long or longer than the shortest event listener name -- &quot;oncut&quot;.
-    if (callFrame.functionName &amp;&amp; callFrame.functionName.startsWith(&quot;on&quot;) &amp;&amp; callFrame.functionName.length &gt;= 5)
-        className = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
</del><ins>+        // This is more than likely an event listener function with an &quot;on&quot; prefix and it is
+        // as long or longer than the shortest event listener name -- &quot;oncut&quot;.
+        if (callFrame.functionName &amp;&amp; callFrame.functionName.startsWith(&quot;on&quot;) &amp;&amp; callFrame.functionName.length &gt;= 5)
+            className = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
</ins><span class="cx"> 
</span><del>-    var title = callFrame.functionName || WebInspector.UIString(&quot;(anonymous function)&quot;);
</del><ins>+        var title = callFrame.functionName || WebInspector.UIString(&quot;(anonymous function)&quot;);
</ins><span class="cx"> 
</span><del>-    WebInspector.GeneralTreeElement.call(this, className, title, null, callFrame, false);
</del><ins>+        super(className, title, null, callFrame, false);
</ins><span class="cx"> 
</span><del>-    if (!callFrame.nativeCode &amp;&amp; callFrame.sourceCodeLocation) {
-        var displayScriptURL = callFrame.sourceCodeLocation.displaySourceCode.url;
-        if (displayScriptURL) {
-            this.subtitle = document.createElement(&quot;span&quot;);
-            callFrame.sourceCodeLocation.populateLiveDisplayLocationString(this.subtitle, &quot;textContent&quot;);
-            // Set the tooltip on the entire tree element in onattach, once the element is created.
-            this.tooltipHandledSeparately = true;
</del><ins>+        if (!callFrame.nativeCode &amp;&amp; callFrame.sourceCodeLocation) {
+            var displayScriptURL = callFrame.sourceCodeLocation.displaySourceCode.url;
+            if (displayScriptURL) {
+                this.subtitle = document.createElement(&quot;span&quot;);
+                callFrame.sourceCodeLocation.populateLiveDisplayLocationString(this.subtitle, &quot;textContent&quot;);
+                // Set the tooltip on the entire tree element in onattach, once the element is created.
+                this.tooltipHandledSeparately = true;
+            }
</ins><span class="cx">         }
</span><del>-    }
</del><span class="cx"> 
</span><del>-    this._callFrame = callFrame;
</del><ins>+        this._callFrame = callFrame;
</ins><span class="cx"> 
</span><del>-    this.small = true;
-};
</del><ins>+        this.small = true;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.CallFrameTreeElement.FunctionIconStyleClassName = &quot;function-icon&quot;;
-WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName = &quot;event-listener-icon&quot;;
-WebInspector.CallFrameTreeElement.NativeIconStyleClassName = &quot;native-icon&quot;;
-
-WebInspector.CallFrameTreeElement.prototype = {
-    constructor: WebInspector.CallFrameTreeElement,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get callFrame()
</span><span class="cx">     {
</span><span class="cx">         return this._callFrame;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Protected
</span><span class="cx"> 
</span><del>-    onattach: function()
</del><ins>+    onattach()
</ins><span class="cx">     {
</span><span class="cx">         WebInspector.GeneralTreeElement.prototype.onattach.call(this);
</span><span class="cx"> 
</span><span class="lines">@@ -84,4 +79,6 @@
</span><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span><del>-WebInspector.CallFrameTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
</del><ins>+WebInspector.CallFrameTreeElement.FunctionIconStyleClassName = &quot;function-icon&quot;;
+WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName = &quot;event-listener-icon&quot;;
+WebInspector.CallFrameTreeElement.NativeIconStyleClassName = &quot;native-icon&quot;;
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsContentFlowTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,4 +1,5 @@
</span><span class="cx"> /*
</span><ins>+ * Copyright (C) 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  * Copyright (C) 2013 Adobe Systems Incorporated. All rights reserved.
</span><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="lines">@@ -27,18 +28,16 @@
</span><span class="cx">  * SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.ContentFlowTreeElement = function(representedObject)
</del><ins>+WebInspector.ContentFlowTreeElement = class ContentFlowTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(representedObject instanceof WebInspector.ContentFlow);
-    WebInspector.GeneralTreeElement.call(this, [WebInspector.ContentFlowTreeElement.StyleClassName, WebInspector.ContentFlowTreeElement.ContentFlowIconStyleClassName], representedObject.name, null, representedObject, false);
</del><ins>+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.ContentFlow);
</ins><span class="cx"> 
</span><del>-    this.small = true;
-};
</del><ins>+        super([WebInspector.ContentFlowTreeElement.StyleClassName, WebInspector.ContentFlowTreeElement.ContentFlowIconStyleClassName], representedObject.name, null, representedObject, false);
</ins><span class="cx"> 
</span><del>-WebInspector.ContentFlowTreeElement.ContentFlowIconStyleClassName = &quot;content-flow-icon&quot;;
-
-WebInspector.ContentFlowTreeElement.prototype = {
-    constructor: WebInspector.ContentFlowTreeElement
</del><ins>+        this.small = true;
+    }
</ins><span class="cx"> };
</span><span class="cx"> 
</span><del>-WebInspector.ContentFlowTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
</del><ins>+WebInspector.ContentFlowTreeElement.ContentFlowIconStyleClassName = &quot;content-flow-icon&quot;;
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCookieStorageTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CookieStorageTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CookieStorageTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CookieStorageTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,24 +23,21 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.CookieStorageTreeElement = function(representedObject)
</del><ins>+WebInspector.CookieStorageTreeElement = class CookieStorageTreeElement extends WebInspector.StorageTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(representedObject instanceof WebInspector.CookieStorageObject);
</del><ins>+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.CookieStorageObject);
</ins><span class="cx"> 
</span><del>-    WebInspector.StorageTreeElement.call(this, WebInspector.CookieStorageTreeElement.CookieIconStyleClassName, WebInspector.displayNameForHost(representedObject.host), representedObject);
-};
</del><ins>+        super(WebInspector.CookieStorageTreeElement.CookieIconStyleClassName, WebInspector.displayNameForHost(representedObject.host), representedObject);
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.CookieStorageTreeElement.CookieIconStyleClassName = &quot;cookie-icon&quot;;
-
-WebInspector.CookieStorageTreeElement.prototype = {
-    constructor: WebInspector.CookieStorageTreeElement,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get name()
</span><span class="cx">     {
</span><span class="cx">         return this.representedObject.host;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get categoryName()
</span><span class="cx">     {
</span><span class="lines">@@ -48,4 +45,4 @@
</span><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span><del>-WebInspector.CookieStorageTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;
</del><ins>+WebInspector.CookieStorageTreeElement.CookieIconStyleClassName = &quot;cookie-icon&quot;;
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMStorageTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMStorageTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMStorageTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMStorageTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -23,30 +23,26 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.DOMStorageTreeElement = function(representedObject)
</del><ins>+WebInspector.DOMStorageTreeElement = class DOMStorageTreeElement extends WebInspector.StorageTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(representedObject instanceof WebInspector.DOMStorageObject);
</del><ins>+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.DOMStorageObject);
</ins><span class="cx"> 
</span><del>-    if (representedObject.isLocalStorage())
-        var className = WebInspector.DOMStorageTreeElement.LocalStorageIconStyleClassName;
-    else
-        var className = WebInspector.DOMStorageTreeElement.SessionStorageIconStyleClassName;
</del><ins>+        if (representedObject.isLocalStorage())
+            var className = WebInspector.DOMStorageTreeElement.LocalStorageIconStyleClassName;
+        else
+            var className = WebInspector.DOMStorageTreeElement.SessionStorageIconStyleClassName;
</ins><span class="cx"> 
</span><del>-    WebInspector.StorageTreeElement.call(this, className, WebInspector.displayNameForHost(representedObject.host), representedObject);
-};
</del><ins>+        super(className, WebInspector.displayNameForHost(representedObject.host), representedObject);
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.DOMStorageTreeElement.LocalStorageIconStyleClassName = &quot;local-storage-icon&quot;;
-WebInspector.DOMStorageTreeElement.SessionStorageIconStyleClassName = &quot;session-storage-icon&quot;;
-
-WebInspector.DOMStorageTreeElement.prototype = {
-    constructor: WebInspector.DOMStorageTreeElement,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get name()
</span><span class="cx">     {
</span><span class="cx">         return WebInspector.displayNameForHost(this.representedObject.host);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get categoryName()
</span><span class="cx">     {
</span><span class="lines">@@ -56,4 +52,5 @@
</span><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span><del>-WebInspector.DOMStorageTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;
</del><ins>+WebInspector.DOMStorageTreeElement.LocalStorageIconStyleClassName = &quot;local-storage-icon&quot;;
+WebInspector.DOMStorageTreeElement.SessionStorageIconStyleClassName = &quot;session-storage-icon&quot;;
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
</del><ins>+ * Copyright (C) 2007, 2008, 2013, 2015 Apple Inc.  All rights reserved.
</ins><span class="cx">  * Copyright (C) 2008 Matt Lilek &lt;webkit@mattlilek.com&gt;
</span><span class="cx">  * Copyright (C) 2009 Joseph Pecoraro
</span><span class="cx">  *
</span><span class="lines">@@ -28,46 +28,27 @@
</span><span class="cx">  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.DOMTreeElement = function(node, elementCloseTag)
</del><ins>+WebInspector.DOMTreeElement = class DOMTreeElement extends WebInspector.TreeElement
</ins><span class="cx"> {
</span><del>-    this._elementCloseTag = elementCloseTag;
-    var hasChildrenOverride = !elementCloseTag &amp;&amp; node.hasChildNodes() &amp;&amp; !this._showInlineText(node);
</del><ins>+    constructor(node, elementCloseTag)
+    {
+        super(&quot;&quot;, node);
</ins><span class="cx"> 
</span><del>-    // The title will be updated in onattach.
-    TreeElement.call(this, &quot;&quot;, node, hasChildrenOverride);
</del><ins>+        this._elementCloseTag = elementCloseTag;
+        this.hasChildren = !elementCloseTag &amp;&amp; node.hasChildNodes() &amp;&amp; !this._showInlineText(node);
</ins><span class="cx"> 
</span><del>-    if (this.representedObject.nodeType() === Node.ELEMENT_NODE &amp;&amp; !elementCloseTag)
-        this._canAddAttributes = true;
-    this._searchQuery = null;
-    this._expandedChildrenLimit = WebInspector.DOMTreeElement.InitialChildrenLimit;
-};
</del><ins>+        if (this.representedObject.nodeType() === Node.ELEMENT_NODE &amp;&amp; !elementCloseTag)
+            this._canAddAttributes = true;
+        this._searchQuery = null;
+        this._expandedChildrenLimit = WebInspector.DOMTreeElement.InitialChildrenLimit;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.DOMTreeElement.InitialChildrenLimit = 500;
-WebInspector.DOMTreeElement.MaximumInlineTextChildLength = 80;
-
-// A union of HTML4 and HTML5-Draft elements that explicitly
-// or implicitly (for HTML5) forbid the closing tag.
-// FIXME: Revise once HTML5 Final is published.
-WebInspector.DOMTreeElement.ForbiddenClosingTagElements = [
-    &quot;area&quot;, &quot;base&quot;, &quot;basefont&quot;, &quot;br&quot;, &quot;canvas&quot;, &quot;col&quot;, &quot;command&quot;, &quot;embed&quot;, &quot;frame&quot;,
-    &quot;hr&quot;, &quot;img&quot;, &quot;input&quot;, &quot;isindex&quot;, &quot;keygen&quot;, &quot;link&quot;, &quot;meta&quot;, &quot;param&quot;, &quot;source&quot;
-].keySet();
-
-// These tags we do not allow editing their tag name.
-WebInspector.DOMTreeElement.EditTagBlacklist = [
-    &quot;html&quot;, &quot;head&quot;, &quot;body&quot;
-].keySet();
-
-WebInspector.DOMTreeElement.SearchHighlightStyleClassName = &quot;search-highlight&quot;;
-WebInspector.DOMTreeElement.BouncyHighlightStyleClassName = &quot;bouncy-highlight&quot;;
-
-WebInspector.DOMTreeElement.prototype = {
-    isCloseTag: function()
</del><ins>+    isCloseTag()
</ins><span class="cx">     {
</span><span class="cx">         return this._elementCloseTag;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    highlightSearchResults: function(searchQuery)
</del><ins>+    highlightSearchResults(searchQuery)
</ins><span class="cx">     {
</span><span class="cx">         if (this._searchQuery !== searchQuery) {
</span><span class="cx">             this._updateSearchHighlight(false);
</span><span class="lines">@@ -77,15 +58,15 @@
</span><span class="cx">         this._searchQuery = searchQuery;
</span><span class="cx">         this._searchHighlightsVisible = true;
</span><span class="cx">         this.updateTitle(true);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    hideSearchHighlights: function()
</del><ins>+    hideSearchHighlights()
</ins><span class="cx">     {
</span><span class="cx">         delete this._searchHighlightsVisible;
</span><span class="cx">         this._updateSearchHighlight(false);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    emphasizeSearchHighlight: function()
</del><ins>+    emphasizeSearchHighlight()
</ins><span class="cx">     {
</span><span class="cx">         var highlightElement = this.title.querySelector(&quot;.&quot; + WebInspector.DOMTreeElement.SearchHighlightStyleClassName);
</span><span class="cx">         console.assert(highlightElement);
</span><span class="lines">@@ -116,9 +97,9 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this._bouncyHighlightElement.addEventListener(&quot;webkitAnimationEnd&quot;, animationEnded.bind(this));
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _updateSearchHighlight: function(show)
</del><ins>+    _updateSearchHighlight(show)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._highlightResult)
</span><span class="cx">             return;
</span><span class="lines">@@ -152,12 +133,12 @@
</span><span class="cx"> 
</span><span class="cx">         for (var i = 0, size = this._highlightResult.length; i &lt; size; ++i)
</span><span class="cx">             updater(this._highlightResult[i]);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get hovered()
</span><span class="cx">     {
</span><span class="cx">         return this._hovered;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set hovered(x)
</span><span class="cx">     {
</span><span class="lines">@@ -174,12 +155,12 @@
</span><span class="cx">                 this.listItemElement.classList.remove(&quot;hovered&quot;);
</span><span class="cx">             }
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get expandedChildrenLimit()
</span><span class="cx">     {
</span><span class="cx">         return this._expandedChildrenLimit;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set expandedChildrenLimit(x)
</span><span class="cx">     {
</span><span class="lines">@@ -189,7 +170,7 @@
</span><span class="cx">         this._expandedChildrenLimit = x;
</span><span class="cx">         if (this.treeOutline &amp;&amp; !this._updateChildrenInProgress)
</span><span class="cx">             this._updateChildren(true);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get expandedChildCount()
</span><span class="cx">     {
</span><span class="lines">@@ -199,9 +180,9 @@
</span><span class="cx">         if (count &amp;&amp; this.children[count - 1].expandAllButton)
</span><span class="cx">             count--;
</span><span class="cx">         return count;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    showChild: function(index)
</del><ins>+    showChild(index)
</ins><span class="cx">     {
</span><span class="cx">         console.assert(!this._elementCloseTag);
</span><span class="cx">         if (this._elementCloseTag)
</span><span class="lines">@@ -214,9 +195,9 @@
</span><span class="cx"> 
</span><span class="cx">         // Whether index-th child is visible in the children tree
</span><span class="cx">         return this.expandedChildCount &gt; index;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _createTooltipForNode: function()
</del><ins>+    _createTooltipForNode()
</ins><span class="cx">     {
</span><span class="cx">         var node = this.representedObject;
</span><span class="cx">         if (!node.nodeName() || node.nodeName().toLowerCase() !== &quot;img&quot;)
</span><span class="lines">@@ -256,9 +237,9 @@
</span><span class="cx">             object.release();
</span><span class="cx">         }
</span><span class="cx">         WebInspector.RemoteObject.resolveNode(node, &quot;&quot;, resolvedNode.bind(this));
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    updateSelection: function()
</del><ins>+    updateSelection()
</ins><span class="cx">     {
</span><span class="cx">         var listItemElement = this.listItemElement;
</span><span class="cx">         if (!listItemElement)
</span><span class="lines">@@ -277,9 +258,9 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this.selectionElement.style.height = listItemElement.offsetHeight + &quot;px&quot;;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onattach: function()
</del><ins>+    onattach()
</ins><span class="cx">     {
</span><span class="cx">         if (this._hovered) {
</span><span class="cx">             this.updateSelection();
</span><span class="lines">@@ -289,51 +270,46 @@
</span><span class="cx">         this.updateTitle();
</span><span class="cx">         this.listItemElement.draggable = true;
</span><span class="cx">         this.listItemElement.addEventListener(&quot;dragstart&quot;, this);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onpopulate: function()
</del><ins>+    onpopulate()
</ins><span class="cx">     {
</span><span class="cx">         if (this.children.length || this._showInlineText(this.representedObject) || this._elementCloseTag)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="cx">         this.updateChildren();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    expandRecursively: function()
</del><ins>+    expandRecursively()
</ins><span class="cx">     {
</span><del>-        function callback()
-        {
-            TreeElement.prototype.expandRecursively.call(this, Number.MAX_VALUE);
-        }
</del><ins>+        this.representedObject.getSubtree(-1, super.expandRecursively.bind(this, Number.MAX_VALUE));
+    }
</ins><span class="cx"> 
</span><del>-        this.representedObject.getSubtree(-1, callback.bind(this));
-    },
-
-    updateChildren: function(fullRefresh)
</del><ins>+    updateChildren(fullRefresh)
</ins><span class="cx">     {
</span><span class="cx">         if (this._elementCloseTag)
</span><span class="cx">             return;
</span><span class="cx">         this.representedObject.getChildNodes(this._updateChildren.bind(this, fullRefresh));
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    insertChildElement: function(child, index, closingTag)
</del><ins>+    insertChildElement(child, index, closingTag)
</ins><span class="cx">     {
</span><span class="cx">         var newElement = new WebInspector.DOMTreeElement(child, closingTag);
</span><span class="cx">         newElement.selectable = this.treeOutline._selectEnabled;
</span><span class="cx">         this.insertChild(newElement, index);
</span><span class="cx">         return newElement;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    moveChild: function(child, targetIndex)
</del><ins>+    moveChild(child, targetIndex)
</ins><span class="cx">     {
</span><span class="cx">         var wasSelected = child.selected;
</span><span class="cx">         this.removeChild(child);
</span><span class="cx">         this.insertChild(child, targetIndex);
</span><span class="cx">         if (wasSelected)
</span><span class="cx">             child.select();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _updateChildren: function(fullRefresh)
</del><ins>+    _updateChildren(fullRefresh)
</ins><span class="cx">     {
</span><span class="cx">         if (this._updateChildrenInProgress || !this.treeOutline._visible)
</span><span class="cx">             return;
</span><span class="lines">@@ -421,25 +397,25 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         delete this._updateChildrenInProgress;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    adjustCollapsedRange: function()
</del><ins>+    adjustCollapsedRange()
</ins><span class="cx">     {
</span><span class="cx">         // Ensure precondition: only the tree elements for node children are found in the tree
</span><span class="cx">         // (not the Expand All button or the closing tag).
</span><span class="cx">         if (this.expandAllButtonElement &amp;&amp; this.expandAllButtonElement.__treeElement.parent)
</span><span class="cx">             this.removeChild(this.expandAllButtonElement.__treeElement);
</span><span class="cx"> 
</span><del>-        const node = this.representedObject;
</del><ins>+        var node = this.representedObject;
</ins><span class="cx">         if (!node.children)
</span><span class="cx">             return;
</span><del>-        const childNodeCount = node.children.length;
</del><ins>+        var childNodeCount = node.children.length;
</ins><span class="cx"> 
</span><span class="cx">         // In case some nodes from the expanded range were removed, pull some nodes from the collapsed range into the expanded range at the bottom.
</span><span class="cx">         for (var i = this.expandedChildCount, limit = Math.min(this.expandedChildrenLimit, childNodeCount); i &lt; limit; ++i)
</span><span class="cx">             this.insertChildElement(node.children[i], i);
</span><span class="cx"> 
</span><del>-        const expandedChildCount = this.expandedChildCount;
</del><ins>+        var expandedChildCount = this.expandedChildCount;
</ins><span class="cx">         if (childNodeCount &gt; this.expandedChildCount) {
</span><span class="cx">             var targetButtonIndex = expandedChildCount;
</span><span class="cx">             if (!this.expandAllButtonElement) {
</span><span class="lines">@@ -447,7 +423,7 @@
</span><span class="cx">                 button.className = &quot;show-all-nodes&quot;;
</span><span class="cx">                 button.value = &quot;&quot;;
</span><span class="cx"> 
</span><del>-                var item = new TreeElement(button, null, false);
</del><ins>+                var item = new WebInspector.TreeElement(button, null, false);
</ins><span class="cx">                 item.selectable = false;
</span><span class="cx">                 item.expandAllButton = true;
</span><span class="cx"> 
</span><span class="lines">@@ -461,32 +437,32 @@
</span><span class="cx">             this.expandAllButtonElement.textContent = WebInspector.UIString(&quot;Show All Nodes (%d More)&quot;).format(childNodeCount - expandedChildCount);
</span><span class="cx">         } else if (this.expandAllButtonElement)
</span><span class="cx">             delete this.expandAllButtonElement;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    handleLoadAllChildren: function()
</del><ins>+    handleLoadAllChildren()
</ins><span class="cx">     {
</span><span class="cx">         this.expandedChildrenLimit = Math.max(this.representedObject.childNodeCount, this.expandedChildrenLimit + WebInspector.DOMTreeElement.InitialChildrenLimit);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onexpand: function()
</del><ins>+    onexpand()
</ins><span class="cx">     {
</span><span class="cx">         if (this._elementCloseTag)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="cx">         this.updateTitle();
</span><span class="cx">         this.treeOutline.updateSelection();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    oncollapse: function()
</del><ins>+    oncollapse()
</ins><span class="cx">     {
</span><span class="cx">         if (this._elementCloseTag)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="cx">         this.updateTitle();
</span><span class="cx">         this.treeOutline.updateSelection();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onreveal: function()
</del><ins>+    onreveal()
</ins><span class="cx">     {
</span><span class="cx">         if (this.listItemElement) {
</span><span class="cx">             var tagSpans = this.listItemElement.getElementsByClassName(&quot;html-tag-name&quot;);
</span><span class="lines">@@ -495,9 +471,9 @@
</span><span class="cx">             else
</span><span class="cx">                 this.listItemElement.scrollIntoViewIfNeeded(false);
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onselect: function(treeElement, selectedByUser)
</del><ins>+    onselect(treeElement, selectedByUser)
</ins><span class="cx">     {
</span><span class="cx">         this.treeOutline.suppressRevealAndSelect = true;
</span><span class="cx">         this.treeOutline.selectDOMNode(this.representedObject, selectedByUser);
</span><span class="lines">@@ -505,14 +481,14 @@
</span><span class="cx">             WebInspector.domTreeManager.highlightDOMNode(this.representedObject.id);
</span><span class="cx">         this.updateSelection();
</span><span class="cx">         this.treeOutline.suppressRevealAndSelect = false;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    ondeselect: function(treeElement)
</del><ins>+    ondeselect(treeElement)
</ins><span class="cx">     {
</span><span class="cx">         this.treeOutline.selectDOMNode(null);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    ondelete: function()
</del><ins>+    ondelete()
</ins><span class="cx">     {
</span><span class="cx">         if (this.representedObject.isInShadowTree())
</span><span class="cx">             return false;
</span><span class="lines">@@ -523,9 +499,9 @@
</span><span class="cx">         else
</span><span class="cx">             this.remove();
</span><span class="cx">         return true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onenter: function()
</del><ins>+    onenter()
</ins><span class="cx">     {
</span><span class="cx">         // On Enter or Return start editing the first attribute
</span><span class="cx">         // or create a new attribute on the selected element.
</span><span class="lines">@@ -536,11 +512,11 @@
</span><span class="cx"> 
</span><span class="cx">         // prevent a newline from being immediately inserted
</span><span class="cx">         return true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    selectOnMouseDown: function(event)
</del><ins>+    selectOnMouseDown(event)
</ins><span class="cx">     {
</span><del>-        TreeElement.prototype.selectOnMouseDown.call(this, event);
</del><ins>+        super.selectOnMouseDown(event);
</ins><span class="cx"> 
</span><span class="cx">         if (this._editing)
</span><span class="cx">             return;
</span><span class="lines">@@ -548,9 +524,9 @@
</span><span class="cx">         // Prevent selecting the nearest word on double click.
</span><span class="cx">         if (event.detail &gt;= 2)
</span><span class="cx">             event.preventDefault();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    ondblclick: function(event)
</del><ins>+    ondblclick(event)
</ins><span class="cx">     {
</span><span class="cx">         if (this._editing || this._elementCloseTag)
</span><span class="cx">             return;
</span><span class="lines">@@ -560,9 +536,9 @@
</span><span class="cx"> 
</span><span class="cx">         if (this.hasChildren &amp;&amp; !this.expanded)
</span><span class="cx">             this.expand();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _insertInLastAttributePosition: function(tag, node)
</del><ins>+    _insertInLastAttributePosition(tag, node)
</ins><span class="cx">     {
</span><span class="cx">         if (tag.getElementsByClassName(&quot;html-attribute&quot;).length &gt; 0)
</span><span class="cx">             tag.insertBefore(node, tag.lastChild);
</span><span class="lines">@@ -575,9 +551,9 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this.updateSelection();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _startEditingTarget: function(eventTarget)
</del><ins>+    _startEditingTarget(eventTarget)
</ins><span class="cx">     {
</span><span class="cx">         if (this.treeOutline.selectedDOMNode() !== this.representedObject)
</span><span class="cx">             return false;
</span><span class="lines">@@ -605,9 +581,9 @@
</span><span class="cx">             return this._addNewAttribute();
</span><span class="cx"> 
</span><span class="cx">         return false;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _populateTagContextMenu: function(contextMenu, event)
</del><ins>+    _populateTagContextMenu(contextMenu, event)
</ins><span class="cx">     {
</span><span class="cx">         var node = this.representedObject;
</span><span class="cx">         if (!node.isInShadowTree()) {
</span><span class="lines">@@ -629,9 +605,9 @@
</span><span class="cx"> 
</span><span class="cx">         this._populateNodeContextMenu(contextMenu);
</span><span class="cx">         this.treeOutline._populateContextMenu(contextMenu, this.representedObject);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _populateForcedPseudoStateItems: function(subMenu)
</del><ins>+    _populateForcedPseudoStateItems(subMenu)
</ins><span class="cx">     {
</span><span class="cx">         var node = this.representedObject;
</span><span class="cx">         var enabledPseudoClasses = node.enabledPseudoClasses;
</span><span class="lines">@@ -643,18 +619,18 @@
</span><span class="cx">                 node.setPseudoClassEnabled(pseudoClass, !enabled);
</span><span class="cx">             }, enabled, false);
</span><span class="cx">         });
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _populateTextContextMenu: function(contextMenu, textNode)
</del><ins>+    _populateTextContextMenu(contextMenu, textNode)
</ins><span class="cx">     {
</span><span class="cx">         var node = this.representedObject;
</span><span class="cx">         if (!node.isInShadowTree())
</span><span class="cx">             contextMenu.appendItem(WebInspector.UIString(&quot;Edit Text&quot;), this._startEditingTextNode.bind(this, textNode));
</span><span class="cx"> 
</span><span class="cx">         this._populateNodeContextMenu(contextMenu);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _populateNodeContextMenu: function(contextMenu)
</del><ins>+    _populateNodeContextMenu(contextMenu)
</ins><span class="cx">     {
</span><span class="cx">         // Add free-form node-related actions.
</span><span class="cx">         var node = this.representedObject;
</span><span class="lines">@@ -663,9 +639,9 @@
</span><span class="cx">         contextMenu.appendItem(WebInspector.UIString(&quot;Copy as HTML&quot;), this._copyHTML.bind(this));
</span><span class="cx">         if (!node.isInShadowTree())
</span><span class="cx">             contextMenu.appendItem(WebInspector.UIString(&quot;Delete Node&quot;), this.remove.bind(this));
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _startEditing: function()
</del><ins>+    _startEditing()
</ins><span class="cx">     {
</span><span class="cx">         if (this.treeOutline.selectedDOMNode() !== this.representedObject)
</span><span class="cx">             return false;
</span><span class="lines">@@ -689,9 +665,9 @@
</span><span class="cx">                 return this._startEditingTextNode(textNode);
</span><span class="cx">             return false;
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _addNewAttribute: function()
</del><ins>+    _addNewAttribute()
</ins><span class="cx">     {
</span><span class="cx">         // Cannot just convert the textual html into an element without
</span><span class="cx">         // a parent node. Use a temporary span container for the HTML.
</span><span class="lines">@@ -704,9 +680,9 @@
</span><span class="cx">         var tag = this.listItemElement.getElementsByClassName(&quot;html-tag&quot;)[0];
</span><span class="cx">         this._insertInLastAttributePosition(tag, attr);
</span><span class="cx">         return this._startEditingAttribute(attr, attr);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _triggerEditAttribute: function(attributeName)
</del><ins>+    _triggerEditAttribute(attributeName)
</ins><span class="cx">     {
</span><span class="cx">         var attributeElements = this.listItemElement.getElementsByClassName(&quot;html-attribute-name&quot;);
</span><span class="cx">         for (var i = 0, len = attributeElements.length; i &lt; len; ++i) {
</span><span class="lines">@@ -720,9 +696,9 @@
</span><span class="cx">                 }
</span><span class="cx">             }
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _startEditingAttribute: function(attribute, elementForSelection)
</del><ins>+    _startEditingAttribute(attribute, elementForSelection)
</ins><span class="cx">     {
</span><span class="cx">         if (WebInspector.isBeingEdited(attribute))
</span><span class="cx">             return true;
</span><span class="lines">@@ -756,9 +732,9 @@
</span><span class="cx">         window.getSelection().setBaseAndExtent(elementForSelection, 0, elementForSelection, 1);
</span><span class="cx"> 
</span><span class="cx">         return true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _startEditingTextNode: function(textNode)
</del><ins>+    _startEditingTextNode(textNode)
</ins><span class="cx">     {
</span><span class="cx">         if (WebInspector.isBeingEdited(textNode))
</span><span class="cx">             return true;
</span><span class="lines">@@ -769,9 +745,9 @@
</span><span class="cx">         window.getSelection().setBaseAndExtent(textNode, 0, textNode, 1);
</span><span class="cx"> 
</span><span class="cx">         return true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _startEditingTagName: function(tagNameElement)
</del><ins>+    _startEditingTagName(tagNameElement)
</ins><span class="cx">     {
</span><span class="cx">         if (!tagNameElement) {
</span><span class="cx">             tagNameElement = this.listItemElement.getElementsByClassName(&quot;html-tag-name&quot;)[0];
</span><span class="lines">@@ -812,9 +788,9 @@
</span><span class="cx">         this._editing = WebInspector.startEditing(tagNameElement, config);
</span><span class="cx">         window.getSelection().setBaseAndExtent(tagNameElement, 0, tagNameElement, 1);
</span><span class="cx">         return true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _startEditingAsHTML: function(commitCallback, error, initialValue)
</del><ins>+    _startEditingAsHTML(commitCallback, error, initialValue)
</ins><span class="cx">     {
</span><span class="cx">         if (error)
</span><span class="cx">             return;
</span><span class="lines">@@ -868,9 +844,9 @@
</span><span class="cx">         var config = new WebInspector.EditingConfig(commit.bind(this), dispose.bind(this));
</span><span class="cx">         config.setMultiline(true);
</span><span class="cx">         this._editing = WebInspector.startEditing(this._htmlEditElement, config);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _attributeEditingCommitted: function(element, newText, oldText, attributeName, moveDirection)
</del><ins>+    _attributeEditingCommitted(element, newText, oldText, attributeName, moveDirection)
</ins><span class="cx">     {
</span><span class="cx">         this._editing = false;
</span><span class="cx"> 
</span><span class="lines">@@ -925,9 +901,9 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this.representedObject.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this));
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _tagNameEditingCommitted: function(element, newText, oldText, tagName, moveDirection)
</del><ins>+    _tagNameEditingCommitted(element, newText, oldText, tagName, moveDirection)
</ins><span class="cx">     {
</span><span class="cx">         this._editing = false;
</span><span class="cx">         var self = this;
</span><span class="lines">@@ -986,9 +962,9 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this.representedObject.setNodeName(newText, changeTagNameCallback);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _textNodeEditingCommitted: function(element, newText)
</del><ins>+    _textNodeEditingCommitted(element, newText)
</ins><span class="cx">     {
</span><span class="cx">         this._editing = false;
</span><span class="cx"> 
</span><span class="lines">@@ -1001,17 +977,17 @@
</span><span class="cx">             textNode = this.representedObject;
</span><span class="cx"> 
</span><span class="cx">         textNode.setNodeValue(newText, this.updateTitle.bind(this));
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _editingCancelled: function(element, context)
</del><ins>+    _editingCancelled(element, context)
</ins><span class="cx">     {
</span><span class="cx">         this._editing = false;
</span><span class="cx"> 
</span><span class="cx">         // Need to restore attributes structure.
</span><span class="cx">         this.updateTitle();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _distinctClosingTagElement: function()
</del><ins>+    _distinctClosingTagElement()
</ins><span class="cx">     {
</span><span class="cx">         // FIXME: Improve the Tree Element / Outline Abstraction to prevent crawling the DOM
</span><span class="cx"> 
</span><span class="lines">@@ -1027,9 +1003,9 @@
</span><span class="cx">         // null in the case where there isn't a closing tag.
</span><span class="cx">         var tags = this.listItemElement.getElementsByClassName(&quot;html-tag&quot;);
</span><span class="cx">         return (tags.length === 1 ? null : tags[tags.length - 1]);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    updateTitle: function(onlySearchQueryChanged)
</del><ins>+    updateTitle(onlySearchQueryChanged)
</ins><span class="cx">     {
</span><span class="cx">         // If we are editing, return early to prevent canceling the edit.
</span><span class="cx">         // After editing is committed updateTitle will be called.
</span><span class="lines">@@ -1048,9 +1024,9 @@
</span><span class="cx">         delete this.selectionElement;
</span><span class="cx">         this.updateSelection();
</span><span class="cx">         this._highlightSearchResults();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _buildAttributeDOM: function(parentElement, name, value, node)
</del><ins>+    _buildAttributeDOM(parentElement, name, value, node)
</ins><span class="cx">     {
</span><span class="cx">         var hasText = (value.length &gt; 0);
</span><span class="cx">         var attrSpanElement = parentElement.createChild(&quot;span&quot;, &quot;html-attribute&quot;);
</span><span class="lines">@@ -1087,9 +1063,9 @@
</span><span class="cx"> 
</span><span class="cx">         if (hasText)
</span><span class="cx">             attrSpanElement.appendChild(document.createTextNode(&quot;\&quot;&quot;));
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _buildTagDOM: function(parentElement, tagName, isClosingTag, isDistinctTreeElement)
</del><ins>+    _buildTagDOM(parentElement, tagName, isClosingTag, isDistinctTreeElement)
</ins><span class="cx">     {
</span><span class="cx">         var node = this.representedObject;
</span><span class="cx">         var classes = [ &quot;html-tag&quot; ];
</span><span class="lines">@@ -1111,13 +1087,20 @@
</span><span class="cx">         }
</span><span class="cx">         tagElement.appendChild(document.createTextNode(&quot;&gt;&quot;));
</span><span class="cx">         parentElement.appendChild(document.createTextNode(&quot;\u200B&quot;));
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _nodeTitleInfo: function()
</del><ins>+    _nodeTitleInfo()
</ins><span class="cx">     {
</span><span class="cx">         var node = this.representedObject;
</span><span class="cx">         var info = {titleDOM: document.createDocumentFragment(), hasChildren: this.hasChildren};
</span><span class="cx"> 
</span><ins>+        function trimedNodeValue()
+        {
+            // Trim empty lines from the beginning and extra space at the end since most style and script tags begin with a newline
+            // and end with a newline and indentation for the end tag.
+            return node.nodeValue().replace(/^[\n\r]*/, &quot;&quot;).replace(/\s*$/, &quot;&quot;);
+        }
+
</ins><span class="cx">         switch (node.nodeType()) {
</span><span class="cx">             case Node.DOCUMENT_FRAGMENT_NODE:
</span><span class="cx">                 var fragmentElement = info.titleDOM.createChild(&quot;span&quot;, &quot;webkit-html-fragment&quot;);
</span><span class="lines">@@ -1177,13 +1160,6 @@
</span><span class="cx">                 break;
</span><span class="cx"> 
</span><span class="cx">             case Node.TEXT_NODE:
</span><del>-                function trimedNodeValue()
-                {
-                    // Trim empty lines from the beginning and extra space at the end since most style and script tags begin with a newline
-                    // and end with a newline and indentation for the end tag.
-                    return node.nodeValue().replace(/^[\n\r]*/, &quot;&quot;).replace(/\s*$/, &quot;&quot;);
-                }
-
</del><span class="cx">                 if (node.parentNode &amp;&amp; node.parentNode.nodeName().toLowerCase() === &quot;script&quot;) {
</span><span class="cx">                     var newNode = info.titleDOM.createChild(&quot;span&quot;, &quot;html-text-node large&quot;);
</span><span class="cx">                     newNode.appendChild(WebInspector.syntaxHighlightStringAsDocumentFragment(trimedNodeValue(), &quot;text/javascript&quot;));
</span><span class="lines">@@ -1237,9 +1213,9 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         return info;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _singleTextChild: function(node)
</del><ins>+    _singleTextChild(node)
</ins><span class="cx">     {
</span><span class="cx">         if (!node)
</span><span class="cx">             return null;
</span><span class="lines">@@ -1253,9 +1229,9 @@
</span><span class="cx"> 
</span><span class="cx">         var sibling = firstChild.nextSibling;
</span><span class="cx">         return sibling ? null : firstChild;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _showInlineText: function(node)
</del><ins>+    _showInlineText(node)
</ins><span class="cx">     {
</span><span class="cx">         if (node.nodeType() === Node.ELEMENT_NODE) {
</span><span class="cx">             var textChild = this._singleTextChild(node);
</span><span class="lines">@@ -1263,9 +1239,9 @@
</span><span class="cx">                 return true;
</span><span class="cx">         }
</span><span class="cx">         return false;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    remove: function()
</del><ins>+    remove()
</ins><span class="cx">     {
</span><span class="cx">         var parentElement = this.parent;
</span><span class="cx">         if (!parentElement)
</span><span class="lines">@@ -1285,9 +1261,9 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this.representedObject.removeNode(removeNodeCallback);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _editAsHTML: function()
</del><ins>+    _editAsHTML()
</ins><span class="cx">     {
</span><span class="cx">         var treeOutline = this.treeOutline;
</span><span class="cx">         var node = this.representedObject;
</span><span class="lines">@@ -1322,14 +1298,14 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         node.getOuterHTML(this._startEditingAsHTML.bind(this, commitChange));
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _copyHTML: function()
</del><ins>+    _copyHTML()
</ins><span class="cx">     {
</span><span class="cx">         this.representedObject.copyNode();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _highlightSearchResults: function()
</del><ins>+    _highlightSearchResults()
</ins><span class="cx">     {
</span><span class="cx">         if (!this.title || !this._searchQuery || !this._searchHighlightsVisible)
</span><span class="cx">             return;
</span><span class="lines">@@ -1356,13 +1332,30 @@
</span><span class="cx"> 
</span><span class="cx">         this._highlightResult = [];
</span><span class="cx">         WebInspector.highlightRangesWithStyleClass(this.title, matchRanges, WebInspector.DOMTreeElement.SearchHighlightStyleClassName, this._highlightResult);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    handleEvent: function(event)
</del><ins>+    handleEvent(event)
</ins><span class="cx">     {
</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><span class="cx"> };
</span><span class="cx"> 
</span><del>-WebInspector.DOMTreeElement.prototype.__proto__ = TreeElement.prototype;
</del><ins>+WebInspector.DOMTreeElement.InitialChildrenLimit = 500;
+WebInspector.DOMTreeElement.MaximumInlineTextChildLength = 80;
+
+// A union of HTML4 and HTML5-Draft elements that explicitly
+// or implicitly (for HTML5) forbid the closing tag.
+WebInspector.DOMTreeElement.ForbiddenClosingTagElements = [
+    &quot;area&quot;, &quot;base&quot;, &quot;basefont&quot;, &quot;br&quot;, &quot;canvas&quot;, &quot;col&quot;, &quot;command&quot;, &quot;embed&quot;, &quot;frame&quot;,
+    &quot;hr&quot;, &quot;img&quot;, &quot;input&quot;, &quot;isindex&quot;, &quot;keygen&quot;, &quot;link&quot;, &quot;meta&quot;, &quot;param&quot;, &quot;source&quot;,
+    &quot;wbr&quot;, &quot;track&quot;, &quot;menuitem&quot;
+].keySet();
+
+// These tags we do not allow editing their tag name.
+WebInspector.DOMTreeElement.EditTagBlacklist = [
+    &quot;html&quot;, &quot;head&quot;, &quot;body&quot;
+].keySet();
+
+WebInspector.DOMTreeElement.SearchHighlightStyleClassName = &quot;search-highlight&quot;;
+WebInspector.DOMTreeElement.BouncyHighlightStyleClassName = &quot;bouncy-highlight&quot;;
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
</del><ins>+ * Copyright (C) 2007, 2008, 2013, 2015 Apple Inc.  All rights reserved.
</ins><span class="cx">  * Copyright (C) 2008 Matt Lilek &lt;webkit@mattlilek.com&gt;
</span><span class="cx">  * Copyright (C) 2009 Joseph Pecoraro
</span><span class="cx">  *
</span><span class="lines">@@ -28,67 +28,60 @@
</span><span class="cx">  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.DOMTreeOutline = function(omitRootDOMNode, selectEnabled, showInElementsPanelEnabled)
</del><ins>+WebInspector.DOMTreeOutline = class DOMTreeOutline extends WebInspector.TreeOutline
</ins><span class="cx"> {
</span><del>-    this.element = document.createElement(&quot;ol&quot;);
-    this.element.addEventListener(&quot;mousedown&quot;, this._onmousedown.bind(this), false);
-    this.element.addEventListener(&quot;mousemove&quot;, this._onmousemove.bind(this), false);
-    this.element.addEventListener(&quot;mouseout&quot;, this._onmouseout.bind(this), false);
-    this.element.addEventListener(&quot;dragstart&quot;, this._ondragstart.bind(this), false);
-    this.element.addEventListener(&quot;dragover&quot;, this._ondragover.bind(this), false);
-    this.element.addEventListener(&quot;dragleave&quot;, this._ondragleave.bind(this), false);
-    this.element.addEventListener(&quot;drop&quot;, this._ondrop.bind(this), false);
-    this.element.addEventListener(&quot;dragend&quot;, this._ondragend.bind(this), false);
</del><ins>+    constructor(omitRootDOMNode, selectEnabled, showInElementsPanelEnabled)
+    {
+        var element = document.createElement(&quot;ol&quot;);
</ins><span class="cx"> 
</span><del>-    this.element.classList.add(WebInspector.DOMTreeOutline.StyleClassName);
-    this.element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
</del><ins>+        super(element);
</ins><span class="cx"> 
</span><del>-    TreeOutline.call(this, this.element);
</del><ins>+        element.addEventListener(&quot;mousedown&quot;, this._onmousedown.bind(this), false);
+        element.addEventListener(&quot;mousemove&quot;, this._onmousemove.bind(this), false);
+        element.addEventListener(&quot;mouseout&quot;, this._onmouseout.bind(this), false);
+        element.addEventListener(&quot;dragstart&quot;, this._ondragstart.bind(this), false);
+        element.addEventListener(&quot;dragover&quot;, this._ondragover.bind(this), false);
+        element.addEventListener(&quot;dragleave&quot;, this._ondragleave.bind(this), false);
+        element.addEventListener(&quot;drop&quot;, this._ondrop.bind(this), false);
+        element.addEventListener(&quot;dragend&quot;, this._ondragend.bind(this), false);
</ins><span class="cx"> 
</span><del>-    this._includeRootDOMNode = !omitRootDOMNode;
-    this._selectEnabled = selectEnabled;
-    this._showInElementsPanelEnabled = showInElementsPanelEnabled;
-    this._rootDOMNode = null;
-    this._selectedDOMNode = null;
-    this._eventSupport = new WebInspector.Object();
-    this._editing = false;
</del><ins>+        element.classList.add(&quot;dom-tree-outline&quot;);
+        element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
</ins><span class="cx"> 
</span><del>-    this._visible = false;
</del><ins>+        this._includeRootDOMNode = !omitRootDOMNode;
+        this._selectEnabled = selectEnabled;
+        this._showInElementsPanelEnabled = showInElementsPanelEnabled;
+        this._rootDOMNode = null;
+        this._selectedDOMNode = null;
+        this._eventSupport = new WebInspector.Object();
+        this._editing = false;
</ins><span class="cx"> 
</span><del>-    this.element.addEventListener(&quot;contextmenu&quot;, this._contextMenuEventFired.bind(this), true);
</del><ins>+        this._visible = false;
</ins><span class="cx"> 
</span><del>-    this._hideElementKeyboardShortcut = new WebInspector.KeyboardShortcut(null, &quot;H&quot;, this._hideElement.bind(this), this.element);
-    this._hideElementKeyboardShortcut.implicitlyPreventsDefault = false;
</del><ins>+        this.element.addEventListener(&quot;contextmenu&quot;, this._contextMenuEventFired.bind(this), true);
</ins><span class="cx"> 
</span><del>-    WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
-};
</del><ins>+        this._hideElementKeyboardShortcut = new WebInspector.KeyboardShortcut(null, &quot;H&quot;, this._hideElement.bind(this), this.element);
+        this._hideElementKeyboardShortcut.implicitlyPreventsDefault = false;
</ins><span class="cx"> 
</span><del>-// FIXME: Move to a WebInspector.Object subclass and we can remove this.
-WebInspector.Object.deprecatedAddConstructorFunctions(WebInspector.DOMTreeOutline);
</del><ins>+        WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.DOMTreeOutline.StyleClassName = &quot;dom-tree-outline&quot;;
</del><ins>+    // Public
</ins><span class="cx"> 
</span><del>-WebInspector.DOMTreeOutline.Event = {
-    SelectedNodeChanged: &quot;dom-tree-outline-selected-node-changed&quot;
-};
-
-WebInspector.DOMTreeOutline.prototype = {
-    constructor: WebInspector.DOMTreeOutline,
-
-    wireToDomAgent: function()
</del><ins>+    wireToDomAgent()
</ins><span class="cx">     {
</span><span class="cx">         this._elementsTreeUpdater = new WebInspector.DOMTreeUpdater(this);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    close: function()
</del><ins>+    close()
</ins><span class="cx">     {
</span><span class="cx">         if (this._elementsTreeUpdater) {
</span><span class="cx">             this._elementsTreeUpdater.close();
</span><span class="cx">             this._elementsTreeUpdater = null;
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    setVisible: function(visible, omitFocus)
</del><ins>+    setVisible(visible, omitFocus)
</ins><span class="cx">     {
</span><span class="cx">         this._visible = visible;
</span><span class="cx">         if (!this._visible)
</span><span class="lines">@@ -97,22 +90,22 @@
</span><span class="cx">         this._updateModifiedNodes();
</span><span class="cx">         if (this._selectedDOMNode)
</span><span class="cx">             this._revealAndSelectNode(this._selectedDOMNode, omitFocus);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    addEventListener: function(eventType, listener, thisObject)
</del><ins>+    addEventListener(eventType, listener, thisObject)
</ins><span class="cx">     {
</span><span class="cx">         this._eventSupport.addEventListener(eventType, listener, thisObject);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    removeEventListener: function(eventType, listener, thisObject)
</del><ins>+    removeEventListener(eventType, listener, thisObject)
</ins><span class="cx">     {
</span><span class="cx">         this._eventSupport.removeEventListener(eventType, listener, thisObject);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get rootDOMNode()
</span><span class="cx">     {
</span><span class="cx">         return this._rootDOMNode;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set rootDOMNode(x)
</span><span class="cx">     {
</span><span class="lines">@@ -124,19 +117,19 @@
</span><span class="cx">         this._isXMLMimeType = x &amp;&amp; x.isXMLNode();
</span><span class="cx"> 
</span><span class="cx">         this.update();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get isXMLMimeType()
</span><span class="cx">     {
</span><span class="cx">         return this._isXMLMimeType;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    selectedDOMNode: function()
</del><ins>+    selectedDOMNode()
</ins><span class="cx">     {
</span><span class="cx">         return this._selectedDOMNode;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    selectDOMNode: function(node, focus)
</del><ins>+    selectDOMNode(node, focus)
</ins><span class="cx">     {
</span><span class="cx">         if (this._selectedDOMNode === node) {
</span><span class="cx">             this._revealAndSelectNode(node, !focus);
</span><span class="lines">@@ -153,14 +146,14 @@
</span><span class="cx">         // Note that _revealAndSelectNode will not do anything for a null node.
</span><span class="cx">         if (!node || this._selectedDOMNode === node)
</span><span class="cx">             this._selectedNodeChanged();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get editing()
</span><span class="cx">     {
</span><span class="cx">         return this._editing;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    update: function()
</del><ins>+    update()
</ins><span class="cx">     {
</span><span class="cx">         var selectedNode = this.selectedTreeElement ? this.selectedTreeElement.representedObject : null;
</span><span class="cx"> 
</span><span class="lines">@@ -187,22 +180,22 @@
</span><span class="cx"> 
</span><span class="cx">         if (selectedNode)
</span><span class="cx">             this._revealAndSelectNode(selectedNode, true);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    updateSelection: function()
</del><ins>+    updateSelection()
</ins><span class="cx">     {
</span><span class="cx">         if (!this.selectedTreeElement)
</span><span class="cx">             return;
</span><span class="cx">         var element = this.treeOutline.selectedTreeElement;
</span><span class="cx">         element.updateSelection();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _selectedNodeChanged: function()
</del><ins>+    _selectedNodeChanged()
</ins><span class="cx">     {
</span><span class="cx">         this._eventSupport.dispatchEventToListeners(WebInspector.DOMTreeOutline.Event.SelectedNodeChanged);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    findTreeElement: function(node)
</del><ins>+    findTreeElement(node)
</ins><span class="cx">     {
</span><span class="cx">         function isAncestorNode(ancestor, node)
</span><span class="cx">         {
</span><span class="lines">@@ -214,16 +207,16 @@
</span><span class="cx">             return node.parentNode;
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        var treeElement = TreeOutline.prototype.findTreeElement.call(this, node, isAncestorNode, parentNode);
</del><ins>+        var treeElement = super.findTreeElement(node, isAncestorNode, parentNode);
</ins><span class="cx">         if (!treeElement &amp;&amp; node.nodeType() === Node.TEXT_NODE) {
</span><span class="cx">             // The text node might have been inlined if it was short, so try to find the parent element.
</span><del>-            treeElement = TreeOutline.prototype.findTreeElement.call(this, node.parentNode, isAncestorNode, parentNode);
</del><ins>+            treeElement = super.findTreeElement(node.parentNode, isAncestorNode, parentNode);
</ins><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         return treeElement;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    createTreeElementFor: function(node)
</del><ins>+    createTreeElementFor(node)
</ins><span class="cx">     {
</span><span class="cx">         var treeElement = this.findTreeElement(node);
</span><span class="cx">         if (treeElement)
</span><span class="lines">@@ -236,17 +229,50 @@
</span><span class="cx">             return treeElement.children[node.index];
</span><span class="cx"> 
</span><span class="cx">         return null;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set suppressRevealAndSelect(x)
</span><span class="cx">     {
</span><span class="cx">         if (this._suppressRevealAndSelect === x)
</span><span class="cx">             return;
</span><span class="cx">         this._suppressRevealAndSelect = x;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _revealAndSelectNode: function(node, omitFocus)
</del><ins>+    populateContextMenu(contextMenu, event, treeElement)
</ins><span class="cx">     {
</span><ins>+        var tag = event.target.enclosingNodeOrSelfWithClass(&quot;html-tag&quot;);
+        var textNode = event.target.enclosingNodeOrSelfWithClass(&quot;html-text-node&quot;);
+        var commentNode = event.target.enclosingNodeOrSelfWithClass(&quot;html-comment&quot;);
+
+        var populated = false;
+        if (tag &amp;&amp; treeElement._populateTagContextMenu) {
+            if (populated)
+                contextMenu.appendSeparator();
+            treeElement._populateTagContextMenu(contextMenu, event);
+            populated = true;
+        } else if (textNode &amp;&amp; treeElement._populateTextContextMenu) {
+            if (populated)
+                contextMenu.appendSeparator();
+            treeElement._populateTextContextMenu(contextMenu, textNode);
+            populated = true;
+        } else if (commentNode &amp;&amp; treeElement._populateNodeContextMenu) {
+            if (populated)
+                contextMenu.appendSeparator();
+            treeElement._populateNodeContextMenu(contextMenu, textNode);
+            populated = true;
+        }
+
+        return populated;
+    }
+
+    adjustCollapsedRange()
+    {
+    }
+
+    // Private
+
+    _revealAndSelectNode(node, omitFocus)
+    {
</ins><span class="cx">         if (!node || this._suppressRevealAndSelect)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="lines">@@ -255,9 +281,9 @@
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="cx">         treeElement.revealAndSelect(omitFocus);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _treeElementFromEvent: function(event)
</del><ins>+    _treeElementFromEvent(event)
</ins><span class="cx">     {
</span><span class="cx">         var scrollContainer = this.element.parentElement;
</span><span class="cx"> 
</span><span class="lines">@@ -281,9 +307,9 @@
</span><span class="cx">             element = this.treeElementFromPoint(x, y + 2);
</span><span class="cx"> 
</span><span class="cx">         return element;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _onmousedown: function(event)
</del><ins>+    _onmousedown(event)
</ins><span class="cx">     {
</span><span class="cx">         var element = this._treeElementFromEvent(event);
</span><span class="cx">         if (!element || element.isEventWithinDisclosureTriangle(event)) {
</span><span class="lines">@@ -292,9 +318,9 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         element.select();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _onmousemove: function(event)
</del><ins>+    _onmousemove(event)
</ins><span class="cx">     {
</span><span class="cx">         var element = this._treeElementFromEvent(event);
</span><span class="cx">         if (element &amp;&amp; this._previousHoveredElement === element)
</span><span class="lines">@@ -315,9 +341,9 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         WebInspector.domTreeManager.highlightDOMNode(element ? element.representedObject.id : 0);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _onmouseout: function(event)
</del><ins>+    _onmouseout(event)
</ins><span class="cx">     {
</span><span class="cx">         var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
</span><span class="cx">         if (nodeUnderMouse &amp;&amp; nodeUnderMouse.isDescendant(this.element))
</span><span class="lines">@@ -329,9 +355,9 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         WebInspector.domTreeManager.hideDOMNodeHighlight();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _ondragstart: function(event)
</del><ins>+    _ondragstart(event)
</ins><span class="cx">     {
</span><span class="cx">         var treeElement = this._treeElementFromEvent(event);
</span><span class="cx">         if (!treeElement)
</span><span class="lines">@@ -350,9 +376,9 @@
</span><span class="cx">         WebInspector.domTreeManager.hideDOMNodeHighlight();
</span><span class="cx"> 
</span><span class="cx">         return true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _ondragover: function(event)
</del><ins>+    _ondragover(event)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._nodeBeingDragged)
</span><span class="cx">             return false;
</span><span class="lines">@@ -374,16 +400,16 @@
</span><span class="cx">         event.preventDefault();
</span><span class="cx">         event.dataTransfer.dropEffect = &quot;move&quot;;
</span><span class="cx">         return false;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _ondragleave: function(event)
</del><ins>+    _ondragleave(event)
</ins><span class="cx">     {
</span><span class="cx">         this._clearDragOverTreeElementMarker();
</span><span class="cx">         event.preventDefault();
</span><span class="cx">         return false;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _isValidDragSourceOrTarget: function(treeElement)
</del><ins>+    _isValidDragSourceOrTarget(treeElement)
</ins><span class="cx">     {
</span><span class="cx">         if (!treeElement)
</span><span class="cx">             return false;
</span><span class="lines">@@ -396,11 +422,23 @@
</span><span class="cx">             return false;
</span><span class="cx"> 
</span><span class="cx">         return true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _ondrop: function(event)
</del><ins>+    _ondrop(event)
</ins><span class="cx">     {
</span><span class="cx">         event.preventDefault();
</span><ins>+
+        function callback(error, newNodeId)
+        {
+            if (error)
+                return;
+
+            this._updateModifiedNodes();
+            var newNode = WebInspector.domTreeManager.nodeForId(newNodeId);
+            if (newNode)
+                this.selectDOMNode(newNode, true);
+        }
+
</ins><span class="cx">         var treeElement = this._treeElementFromEvent(event);
</span><span class="cx">         if (this._nodeBeingDragged &amp;&amp; treeElement) {
</span><span class="cx">             var parentNode;
</span><span class="lines">@@ -415,39 +453,29 @@
</span><span class="cx">                 anchorNode = dragTargetNode;
</span><span class="cx">             }
</span><span class="cx"> 
</span><del>-            function callback(error, newNodeId)
-            {
-                if (error)
-                    return;
-
-                this._updateModifiedNodes();
-                var newNode = WebInspector.domTreeManager.nodeForId(newNodeId);
-                if (newNode)
-                    this.selectDOMNode(newNode, true);
-            }
</del><span class="cx">             this._nodeBeingDragged.moveTo(parentNode, anchorNode, callback.bind(this));
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         delete this._nodeBeingDragged;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _ondragend: function(event)
</del><ins>+    _ondragend(event)
</ins><span class="cx">     {
</span><span class="cx">         event.preventDefault();
</span><span class="cx">         this._clearDragOverTreeElementMarker();
</span><span class="cx">         delete this._nodeBeingDragged;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _clearDragOverTreeElementMarker: function()
</del><ins>+    _clearDragOverTreeElementMarker()
</ins><span class="cx">     {
</span><span class="cx">         if (this._dragOverTreeElement) {
</span><span class="cx">             this._dragOverTreeElement.updateSelection();
</span><span class="cx">             this._dragOverTreeElement.listItemElement.classList.remove(&quot;elements-drag-over&quot;);
</span><span class="cx">             delete this._dragOverTreeElement;
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _contextMenuEventFired: function(event)
</del><ins>+    _contextMenuEventFired(event)
</ins><span class="cx">     {
</span><span class="cx">         var treeElement = this._treeElementFromEvent(event);
</span><span class="cx">         if (!treeElement)
</span><span class="lines">@@ -456,46 +484,15 @@
</span><span class="cx">         var contextMenu = new WebInspector.ContextMenu(event);
</span><span class="cx">         this.populateContextMenu(contextMenu, event, treeElement);
</span><span class="cx">         contextMenu.show();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    populateContextMenu: function(contextMenu, event, treeElement)
</del><ins>+    _updateModifiedNodes()
</ins><span class="cx">     {
</span><del>-        var tag = event.target.enclosingNodeOrSelfWithClass(&quot;html-tag&quot;);
-        var textNode = event.target.enclosingNodeOrSelfWithClass(&quot;html-text-node&quot;);
-        var commentNode = event.target.enclosingNodeOrSelfWithClass(&quot;html-comment&quot;);
-
-        var populated = false;
-        if (tag &amp;&amp; treeElement._populateTagContextMenu) {
-            if (populated)
-                contextMenu.appendSeparator();
-            treeElement._populateTagContextMenu(contextMenu, event);
-            populated = true;
-        } else if (textNode &amp;&amp; treeElement._populateTextContextMenu) {
-            if (populated)
-                contextMenu.appendSeparator();
-            treeElement._populateTextContextMenu(contextMenu, textNode);
-            populated = true;
-        } else if (commentNode &amp;&amp; treeElement._populateNodeContextMenu) {
-            if (populated)
-                contextMenu.appendSeparator();
-            treeElement._populateNodeContextMenu(contextMenu, textNode);
-            populated = true;
-        }
-
-        return populated;
-    },
-
-    adjustCollapsedRange: function()
-    {
-    },
-
-    _updateModifiedNodes: function()
-    {
</del><span class="cx">         if (this._elementsTreeUpdater)
</span><span class="cx">             this._elementsTreeUpdater._updateModifiedNodes();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _populateContextMenu: function(contextMenu, domNode)
</del><ins>+    _populateContextMenu(contextMenu, domNode)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._showInElementsPanelEnabled)
</span><span class="cx">             return;
</span><span class="lines">@@ -507,9 +504,9 @@
</span><span class="cx"> 
</span><span class="cx">         contextMenu.appendSeparator();
</span><span class="cx">         contextMenu.appendItem(WebInspector.UIString(&quot;Reveal in DOM Tree&quot;), revealElement);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _showShadowDOMSettingChanged: function(event)
</del><ins>+    _showShadowDOMSettingChanged(event)
</ins><span class="cx">     {
</span><span class="cx">         var nodeToSelect = this.selectedTreeElement ? this.selectedTreeElement.representedObject : null;
</span><span class="cx">         while (nodeToSelect) {
</span><span class="lines">@@ -524,9 +521,9 @@
</span><span class="cx"> 
</span><span class="cx">         if (nodeToSelect)
</span><span class="cx">             this.selectDOMNode(nodeToSelect);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _hideElement: function(event, keyboardShortcut)
</del><ins>+    _hideElement(event, keyboardShortcut)
</ins><span class="cx">     {
</span><span class="cx">         if (!this.selectedTreeElement || WebInspector.isEditingAnyField())
</span><span class="cx">             return;
</span><span class="lines">@@ -577,4 +574,6 @@
</span><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span><del>-WebInspector.DOMTreeOutline.prototype.__proto__ = TreeOutline.prototype;
</del><ins>+WebInspector.DOMTreeOutline.Event = {
+    SelectedNodeChanged: &quot;dom-tree-outline-selected-node-changed&quot;
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDatabaseHostTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseHostTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseHostTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseHostTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,29 +23,26 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.DatabaseHostTreeElement = function(host)
</del><ins>+WebInspector.DatabaseHostTreeElement = class DatabaseHostTreeElement extends WebInspector.StorageTreeElement
</ins><span class="cx"> {
</span><del>-    WebInspector.StorageTreeElement.call(this, WebInspector.FolderTreeElement.FolderIconStyleClassName, WebInspector.displayNameForHost(host), null);
</del><ins>+    constructor(host)
+    {
+        super(WebInspector.FolderTreeElement.FolderIconStyleClassName, WebInspector.displayNameForHost(host), null);
</ins><span class="cx"> 
</span><del>-    this._host = host;
</del><ins>+        this._host = host;
</ins><span class="cx"> 
</span><del>-    this.hasChildren = true;
-};
</del><ins>+        this.hasChildren = true;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.DatabaseHostTreeElement.prototype = {
-    constructor: WebInspector.DatabaseHostTreeElement,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get name()
</span><span class="cx">     {
</span><span class="cx">         return WebInspector.displayNameForHost(this._host);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get categoryName()
</span><span class="cx">     {
</span><span class="cx">         return WebInspector.UIString(&quot;Databases&quot;);
</span><span class="cx">     }
</span><span class="cx"> };
</span><del>-
-WebInspector.DatabaseHostTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDatabaseTableTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,19 +23,14 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.DatabaseTableTreeElement = function(representedObject)
</del><ins>+WebInspector.DatabaseTableTreeElement = class DatabaseTableTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(representedObject instanceof WebInspector.DatabaseTableObject);
</del><ins>+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.DatabaseTableObject);
</ins><span class="cx"> 
</span><del>-    WebInspector.GeneralTreeElement.call(this, WebInspector.DatabaseTableTreeElement.DatabaseTableIconStyleClassName, representedObject.name, null, representedObject, false);
</del><ins>+        super(&quot;database-table-icon&quot;, representedObject.name, null, representedObject, false);
</ins><span class="cx"> 
</span><del>-    this.small = true;
</del><ins>+        this.small = true;
+    }
</ins><span class="cx"> };
</span><del>-
-WebInspector.DatabaseTableTreeElement.DatabaseTableIconStyleClassName = &quot;database-table-icon&quot;;
-
-WebInspector.DatabaseTableTreeElement.prototype = {
-    constructor: WebInspector.DatabaseTableTreeElement
-};
-
-WebInspector.DatabaseTableTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDatabaseTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,33 +23,30 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.DatabaseTreeElement = function(representedObject)
</del><ins>+WebInspector.DatabaseTreeElement = class DatabaseTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(representedObject instanceof WebInspector.DatabaseObject);
</del><ins>+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.DatabaseObject);
</ins><span class="cx"> 
</span><del>-    WebInspector.GeneralTreeElement.call(this, WebInspector.DatabaseTreeElement.DatabaseIconStyleClassName, representedObject.name, null, representedObject, true);
</del><ins>+        super(&quot;database-icon&quot;, representedObject.name, null, representedObject, true);
</ins><span class="cx"> 
</span><del>-    this.small = true;
-    this.hasChildren = false;
</del><ins>+        this.small = true;
+        this.hasChildren = false;
</ins><span class="cx"> 
</span><del>-    // Since we are initially telling the tree element we don't have any children, make sure that we try to populate
-    // the tree element (which will get a list of tables) when the element is created.
-    this.onpopulate();
-};
</del><ins>+        // Since we are initially telling the tree element we don't have any children, make sure that we try to populate
+        // the tree element (which will get a list of tables) when the element is created.
+        this.onpopulate();
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.DatabaseTreeElement.DatabaseIconStyleClassName = &quot;database-icon&quot;;
-
-WebInspector.DatabaseTreeElement.prototype = {
-    constructor: WebInspector.DatabaseTreeElement,
-
</del><span class="cx">     // Overrides from TreeElement (Private)
</span><span class="cx"> 
</span><del>-    oncollapse: function()
</del><ins>+    oncollapse()
</ins><span class="cx">     {
</span><span class="cx">         this.shouldRefreshChildren = true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onpopulate: function()
</del><ins>+    onpopulate()
</ins><span class="cx">     {
</span><span class="cx">         if (this.children.length &amp;&amp; !this.shouldRefreshChildren)
</span><span class="cx">             return;
</span><span class="lines">@@ -71,5 +68,3 @@
</span><span class="cx">         this.representedObject.getTableNames(tableNamesCallback.bind(this));
</span><span class="cx">     }
</span><span class="cx"> };
</span><del>-
-WebInspector.DatabaseTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFolderTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,29 +23,26 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.FolderTreeElement = function(title, subtitle, additionalClassNames, representedObject)
</del><ins>+WebInspector.FolderTreeElement = class FolderTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    var classNames;
-    if (!additionalClassNames)
-        classNames = [];
-    else if (additionalClassNames.constructor === Array)
-        classNames = additionalClassNames;
-    else if (typeof additionalClassNames === &quot;string&quot;)
-        classNames = [additionalClassNames];
</del><ins>+    constructor(title, subtitle, additionalClassNames, representedObject)
+    {
+        var classNames;
+        if (!additionalClassNames)
+            classNames = [];
+        else if (additionalClassNames.constructor === Array)
+            classNames = additionalClassNames;
+        else if (typeof additionalClassNames === &quot;string&quot;)
+            classNames = [additionalClassNames];
</ins><span class="cx"> 
</span><del>-    classNames.unshift(WebInspector.FolderTreeElement.FolderIconStyleClassName);
</del><ins>+        classNames.unshift(WebInspector.FolderTreeElement.FolderIconStyleClassName);
</ins><span class="cx"> 
</span><del>-    WebInspector.GeneralTreeElement.call(this, classNames, title, subtitle, representedObject, true);
</del><ins>+        super(classNames, title, subtitle, representedObject, true);
</ins><span class="cx"> 
</span><del>-    this.small = true;
-};
</del><ins>+        this.small = true;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.FolderTreeElement.FolderIconStyleClassName = &quot;folder-icon&quot;;
-
-WebInspector.FolderTreeElement.prototype = {
-    constructor: WebInspector.FolderTreeElement
-
</del><span class="cx">     // No Methods or Properties
</span><span class="cx"> };
</span><span class="cx"> 
</span><del>-WebInspector.FolderTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
</del><ins>+WebInspector.FolderTreeElement.FolderIconStyleClassName = &quot;folder-icon&quot;;
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFolderizedTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FolderizedTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/FolderizedTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FolderizedTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2014 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,41 +23,34 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.FolderizedTreeElement = function(classNames, title, subtitle, representedObject, hasChildren)
</del><ins>+WebInspector.FolderizedTreeElement = class FolderizedTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    WebInspector.GeneralTreeElement.call(this, classNames, title, subtitle, representedObject, hasChildren);
</del><ins>+    constructor(classNames, title, subtitle, representedObject, hasChildren)
+    {
+        super(classNames, title, subtitle, representedObject, hasChildren);
</ins><span class="cx"> 
</span><del>-    this.shouldRefreshChildren = true;
</del><ins>+        this.shouldRefreshChildren = true;
</ins><span class="cx"> 
</span><del>-    this._folderSettingsKey = &quot;&quot;;
-    this._folderTypeMap = new Map;
-    this._folderizeSettingsMap = new Map;
-    this._groupedIntoFolders = false;
-    this._clearNewChildQueue();
-};
</del><ins>+        this._folderSettingsKey = &quot;&quot;;
+        this._folderTypeMap = new Map;
+        this._folderizeSettingsMap = new Map;
+        this._groupedIntoFolders = false;
+        this._clearNewChildQueue();
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.FolderizedTreeElement.MediumChildCountThreshold = 5;
-WebInspector.FolderizedTreeElement.LargeChildCountThreshold = 15;
-WebInspector.FolderizedTreeElement.NumberOfMediumCategoriesThreshold = 2;
-WebInspector.FolderizedTreeElement.NewChildQueueUpdateInterval = 500;
-
-WebInspector.FolderizedTreeElement.prototype = {
-    constructor: WebInspector.FolderizedTreeElement,
-    __proto__: WebInspector.GeneralTreeElement.prototype,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get groupedIntoFolders()
</span><span class="cx">     {
</span><span class="cx">         return this._groupedIntoFolders;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set folderSettingsKey(x)
</span><span class="cx">     {
</span><span class="cx">         this._folderSettingsKey = x;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    registerFolderizeSettings: function(type, folderDisplayName, validateRepresentedObjectCallback, countChildrenCallback, treeElementConstructor)
</del><ins>+    registerFolderizeSettings(type, folderDisplayName, validateRepresentedObjectCallback, countChildrenCallback, treeElementConstructor)
</ins><span class="cx">     {
</span><span class="cx">         console.assert(type);
</span><span class="cx">         console.assert(folderDisplayName);
</span><span class="lines">@@ -74,13 +67,13 @@
</span><span class="cx">         };
</span><span class="cx"> 
</span><span class="cx">         this._folderizeSettingsMap.set(type, settings);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Overrides from TreeElement (Private).
</span><span class="cx"> 
</span><del>-    removeChildren: function()
</del><ins>+    removeChildren()
</ins><span class="cx">     {
</span><del>-        TreeElement.prototype.removeChildren.call(this);
</del><ins>+        super.removeChildren();
</ins><span class="cx"> 
</span><span class="cx">         this._clearNewChildQueue();
</span><span class="cx"> 
</span><span class="lines">@@ -90,11 +83,11 @@
</span><span class="cx">         this._folderTypeMap.clear();
</span><span class="cx"> 
</span><span class="cx">         this._groupedIntoFolders = false;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Protected
</span><span class="cx"> 
</span><del>-    addChildForRepresentedObject: function(representedObject)
</del><ins>+    addChildForRepresentedObject(representedObject)
</ins><span class="cx">     {
</span><span class="cx">         var settings = this._settingsForRepresentedObject(representedObject);
</span><span class="cx">         console.assert(settings);
</span><span class="lines">@@ -108,18 +101,18 @@
</span><span class="cx">             childTreeElement = new settings.treeElementConstructor(representedObject);
</span><span class="cx"> 
</span><span class="cx">         this._addTreeElement(childTreeElement);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    addRepresentedObjectToNewChildQueue: function(representedObject)
</del><ins>+    addRepresentedObjectToNewChildQueue(representedObject)
</ins><span class="cx">     {
</span><span class="cx">         // This queue reduces flashing as resources load and change folders when their type becomes known.
</span><span class="cx"> 
</span><span class="cx">         this._newChildQueue.push(representedObject);
</span><span class="cx">         if (!this._newChildQueueTimeoutIdentifier)
</span><span class="cx">             this._newChildQueueTimeoutIdentifier = setTimeout(this._populateFromNewChildQueue.bind(this), WebInspector.FolderizedTreeElement.NewChildQueueUpdateInterval);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    removeChildForRepresentedObject: function(representedObject)
</del><ins>+    removeChildForRepresentedObject(representedObject)
</ins><span class="cx">     {
</span><span class="cx">         this._removeRepresentedObjectFromNewChildQueue(representedObject);
</span><span class="cx">         this.updateParentStatus();
</span><span class="lines">@@ -137,14 +130,14 @@
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="cx">         this._removeTreeElement(childTreeElement);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    compareChildTreeElements: function(a, b)
</del><ins>+    compareChildTreeElements(a, b)
</ins><span class="cx">     {
</span><span class="cx">         return this._compareTreeElementsByMainTitle(a, b);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    updateParentStatus: function()
</del><ins>+    updateParentStatus()
</ins><span class="cx">     {
</span><span class="cx">         var hasChildren = false;
</span><span class="cx">         for (var settings of this._folderizeSettingsMap.values()) {
</span><span class="lines">@@ -157,26 +150,26 @@
</span><span class="cx">         this.hasChildren = hasChildren;
</span><span class="cx">         if (!this.hasChildren)
</span><span class="cx">             this.removeChildren();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    prepareToPopulate: function()
</del><ins>+    prepareToPopulate()
</ins><span class="cx">     {
</span><span class="cx">         if (!this._groupedIntoFolders &amp;&amp; this._shouldGroupIntoFolders())
</span><span class="cx">             this._groupedIntoFolders = true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span><del>-    _clearNewChildQueue: function()
</del><ins>+    _clearNewChildQueue()
</ins><span class="cx">     {
</span><span class="cx">         this._newChildQueue = [];
</span><span class="cx">         if (this._newChildQueueTimeoutIdentifier) {
</span><span class="cx">             clearTimeout(this._newChildQueueTimeoutIdentifier);
</span><span class="cx">             this._newChildQueueTimeoutIdentifier = null;
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _populateFromNewChildQueue: function()
</del><ins>+    _populateFromNewChildQueue()
</ins><span class="cx">     {
</span><span class="cx">         if (!this.children.length) {
</span><span class="cx">             this.updateParentStatus();
</span><span class="lines">@@ -190,14 +183,14 @@
</span><span class="cx">             this.addChildForRepresentedObject(this._newChildQueue[i]);
</span><span class="cx"> 
</span><span class="cx">         this._clearNewChildQueue();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _removeRepresentedObjectFromNewChildQueue: function(representedObject)
</del><ins>+    _removeRepresentedObjectFromNewChildQueue(representedObject)
</ins><span class="cx">     {
</span><span class="cx">         this._newChildQueue.remove(representedObject);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _addTreeElement: function(childTreeElement)
</del><ins>+    _addTreeElement(childTreeElement)
</ins><span class="cx">     {
</span><span class="cx">         console.assert(childTreeElement);
</span><span class="cx">         if (!childTreeElement)
</span><span class="lines">@@ -215,27 +208,27 @@
</span><span class="cx"> 
</span><span class="cx">         if (wasSelected)
</span><span class="cx">             childTreeElement.revealAndSelect(true, false, true, true);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _compareTreeElementsByMainTitle: function(a, b)
</del><ins>+    _compareTreeElementsByMainTitle(a, b)
</ins><span class="cx">     {
</span><span class="cx">         return a.mainTitle.localeCompare(b.mainTitle);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _insertFolderTreeElement: function(folderTreeElement)
</del><ins>+    _insertFolderTreeElement(folderTreeElement)
</ins><span class="cx">     {
</span><span class="cx">         console.assert(this._groupedIntoFolders);
</span><span class="cx">         console.assert(!folderTreeElement.parent);
</span><span class="cx">         this.insertChild(folderTreeElement, insertionIndexForObjectInListSortedByFunction(folderTreeElement, this.children, this._compareTreeElementsByMainTitle));
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _insertChildTreeElement: function(parentTreeElement, childTreeElement)
</del><ins>+    _insertChildTreeElement(parentTreeElement, childTreeElement)
</ins><span class="cx">     {
</span><span class="cx">         console.assert(!childTreeElement.parent);
</span><span class="cx">         parentTreeElement.insertChild(childTreeElement, insertionIndexForObjectInListSortedByFunction(childTreeElement, parentTreeElement.children, this.compareChildTreeElements.bind(this)));
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _removeTreeElement: function(childTreeElement, suppressOnDeselect, suppressSelectSibling)
</del><ins>+    _removeTreeElement(childTreeElement, suppressOnDeselect, suppressSelectSibling)
</ins><span class="cx">     {
</span><span class="cx">         var oldParent = childTreeElement.parent;
</span><span class="cx">         if (!oldParent)
</span><span class="lines">@@ -253,9 +246,9 @@
</span><span class="cx">         // Remove the old parent folder if it is now empty.
</span><span class="cx">         if (!oldParent.children.length)
</span><span class="cx">             oldParent.parent.removeChild(oldParent);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _parentTreeElementForRepresentedObject: function(representedObject)
</del><ins>+    _parentTreeElementForRepresentedObject(representedObject)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._groupedIntoFolders)
</span><span class="cx">             return this;
</span><span class="lines">@@ -286,24 +279,24 @@
</span><span class="cx">         folder = createFolderTreeElement.call(this, settings.type, settings.folderDisplayName);
</span><span class="cx">         this._folderTypeMap.set(settings.type, folder);
</span><span class="cx">         return folder;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _folderTreeElementExpandedStateChange: function(folderTreeElement)
</del><ins>+    _folderTreeElementExpandedStateChange(folderTreeElement)
</ins><span class="cx">     {
</span><span class="cx">         console.assert(folderTreeElement.__expandedSetting);
</span><span class="cx">         folderTreeElement.__expandedSetting.value = folderTreeElement.expanded;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _settingsForRepresentedObject: function(representedObject)
</del><ins>+    _settingsForRepresentedObject(representedObject)
</ins><span class="cx">     {
</span><span class="cx">         for (var settings of this._folderizeSettingsMap.values()) {
</span><span class="cx">             if (settings.validateRepresentedObjectCallback(representedObject))
</span><span class="cx">                 return settings;
</span><span class="cx">         }
</span><span class="cx">         return null;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _shouldGroupIntoFolders: function()
</del><ins>+    _shouldGroupIntoFolders()
</ins><span class="cx">     {
</span><span class="cx">         // Already grouped into folders, keep it that way.
</span><span class="cx">         if (this._groupedIntoFolders)
</span><span class="lines">@@ -358,3 +351,8 @@
</span><span class="cx">         return false;
</span><span class="cx">     }
</span><span class="cx"> };
</span><ins>+
+WebInspector.FolderizedTreeElement.MediumChildCountThreshold = 5;
+WebInspector.FolderizedTreeElement.LargeChildCountThreshold = 15;
+WebInspector.FolderizedTreeElement.NumberOfMediumCategoriesThreshold = 2;
+WebInspector.FolderizedTreeElement.NewChildQueueUpdateInterval = 500;
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFrameTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FrameTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/FrameTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FrameTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,101 +23,99 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.FrameTreeElement = function(frame, representedObject)
</del><ins>+WebInspector.FrameTreeElement = class FrameTreeElement extends WebInspector.ResourceTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(frame instanceof WebInspector.Frame);
</del><ins>+    constructor(frame, representedObject)
+    {
+        console.assert(frame instanceof WebInspector.Frame);
</ins><span class="cx"> 
</span><del>-    WebInspector.ResourceTreeElement.call(this, frame.mainResource, representedObject || frame);
</del><ins>+        super(frame.mainResource, representedObject || frame);
</ins><span class="cx"> 
</span><del>-    this._frame = frame;
</del><ins>+        this._frame = frame;
</ins><span class="cx"> 
</span><del>-    this._updateExpandedSetting();
</del><ins>+        this._updateExpandedSetting();
</ins><span class="cx"> 
</span><del>-    frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
-    frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
-    frame.addEventListener(WebInspector.Frame.Event.ResourceWasRemoved, this._resourceWasRemoved, this);
-    frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasAdded, this._childFrameWasAdded, this);
-    frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._childFrameWasRemoved, this);
</del><ins>+        frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+        frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
+        frame.addEventListener(WebInspector.Frame.Event.ResourceWasRemoved, this._resourceWasRemoved, this);
+        frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasAdded, this._childFrameWasAdded, this);
+        frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._childFrameWasRemoved, this);
</ins><span class="cx"> 
</span><del>-    frame.domTree.addEventListener(WebInspector.DOMTree.Event.ContentFlowWasAdded, this._childContentFlowWasAdded, this);
-    frame.domTree.addEventListener(WebInspector.DOMTree.Event.ContentFlowWasRemoved, this._childContentFlowWasRemoved, this);
-    frame.domTree.addEventListener(WebInspector.DOMTree.Event.RootDOMNodeInvalidated, this._rootDOMNodeInvalidated, this);
</del><ins>+        frame.domTree.addEventListener(WebInspector.DOMTree.Event.ContentFlowWasAdded, this._childContentFlowWasAdded, this);
+        frame.domTree.addEventListener(WebInspector.DOMTree.Event.ContentFlowWasRemoved, this._childContentFlowWasRemoved, this);
+        frame.domTree.addEventListener(WebInspector.DOMTree.Event.RootDOMNodeInvalidated, this._rootDOMNodeInvalidated, this);
</ins><span class="cx"> 
</span><del>-    if (this._frame.isMainFrame())
-        this._downloadingPage = false;
</del><ins>+        if (this._frame.isMainFrame())
+            this._downloadingPage = false;
</ins><span class="cx"> 
</span><del>-    this.shouldRefreshChildren = true;
-    this.folderSettingsKey = this._frame.url.hash;
</del><ins>+        this.shouldRefreshChildren = true;
+        this.folderSettingsKey = this._frame.url.hash;
</ins><span class="cx"> 
</span><del>-    this.registerFolderizeSettings(&quot;frames&quot;, WebInspector.UIString(&quot;Frames&quot;),
-        function(representedObject) { return representedObject instanceof WebInspector.Frame; },
-        function() { return this.frame.childFrames.length; }.bind(this),
-        WebInspector.FrameTreeElement
-    );
</del><ins>+        this.registerFolderizeSettings(&quot;frames&quot;, WebInspector.UIString(&quot;Frames&quot;),
+            function(representedObject) { return representedObject instanceof WebInspector.Frame; },
+            function() { return this.frame.childFrames.length; }.bind(this),
+            WebInspector.FrameTreeElement
+        );
</ins><span class="cx"> 
</span><del>-    this.registerFolderizeSettings(&quot;flows&quot;, WebInspector.UIString(&quot;Flows&quot;),
-        function(representedObject) { return representedObject instanceof WebInspector.ContentFlow; },
-        function() { return this.frame.domTree.flowsCount; }.bind(this),
-        WebInspector.ContentFlowTreeElement
-    );
</del><ins>+        this.registerFolderizeSettings(&quot;flows&quot;, WebInspector.UIString(&quot;Flows&quot;),
+            function(representedObject) { return representedObject instanceof WebInspector.ContentFlow; },
+            function() { return this.frame.domTree.flowsCount; }.bind(this),
+            WebInspector.ContentFlowTreeElement
+        );
</ins><span class="cx"> 
</span><del>-    function makeValidateCallback(resourceType) {
-        return function(representedObject) {
-            return representedObject instanceof WebInspector.Resource &amp;&amp; representedObject.type === resourceType;
-        };
-    }
</del><ins>+        function makeValidateCallback(resourceType) {
+            return function(representedObject) {
+                return representedObject instanceof WebInspector.Resource &amp;&amp; representedObject.type === resourceType;
+            };
+        }
</ins><span class="cx"> 
</span><del>-    function makeChildCountCallback(frame, resourceType) {
-        return function() {
-            return frame.resourcesWithType(resourceType).length;
-        };
-    }
</del><ins>+        function makeChildCountCallback(frame, resourceType) {
+            return function() {
+                return frame.resourcesWithType(resourceType).length;
+            };
+        }
</ins><span class="cx"> 
</span><del>-    for (var key in WebInspector.Resource.Type) {
-        var value = WebInspector.Resource.Type[key];
-        var folderName = WebInspector.Resource.displayNameForType(value, true);
-        this.registerFolderizeSettings(key, folderName,
-            makeValidateCallback(value),
-            makeChildCountCallback(this.frame, value),
-            WebInspector.ResourceTreeElement
-        );
</del><ins>+        for (var key in WebInspector.Resource.Type) {
+            var value = WebInspector.Resource.Type[key];
+            var folderName = WebInspector.Resource.displayNameForType(value, true);
+            this.registerFolderizeSettings(key, folderName,
+                makeValidateCallback(value),
+                makeChildCountCallback(this.frame, value),
+                WebInspector.ResourceTreeElement
+            );
+        }
+
+        this.updateParentStatus();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    this.updateParentStatus();
-};
-
-WebInspector.FrameTreeElement.prototype = {
-    constructor: WebInspector.FrameTreeElement,
-    __proto__: WebInspector.ResourceTreeElement.prototype,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get frame()
</span><span class="cx">     {
</span><span class="cx">         return this._frame;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    descendantResourceTreeElementTypeDidChange: function(resourceTreeElement, oldType)
</del><ins>+    descendantResourceTreeElementTypeDidChange(resourceTreeElement, oldType)
</ins><span class="cx">     {
</span><span class="cx">         // Called by descendant ResourceTreeElements.
</span><span class="cx"> 
</span><span class="cx">         // Add the tree element again, which will move it to the new location
</span><span class="cx">         // based on sorting and possible folder changes.
</span><span class="cx">         this._addTreeElement(resourceTreeElement);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    descendantResourceTreeElementMainTitleDidChange: function(resourceTreeElement, oldMainTitle)
</del><ins>+    descendantResourceTreeElementMainTitleDidChange(resourceTreeElement, oldMainTitle)
</ins><span class="cx">     {
</span><span class="cx">         // Called by descendant ResourceTreeElements.
</span><span class="cx"> 
</span><span class="cx">         // Add the tree element again, which will move it to the new location
</span><span class="cx">         // based on sorting and possible folder changes.
</span><span class="cx">         this._addTreeElement(resourceTreeElement);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Overrides from SourceCodeTreeElement.
</span><span class="cx"> 
</span><del>-    updateSourceMapResources: function()
</del><ins>+    updateSourceMapResources()
</ins><span class="cx">     {
</span><span class="cx">         // Frames handle their own SourceMapResources.
</span><span class="cx"> 
</span><span class="lines">@@ -131,9 +129,9 @@
</span><span class="cx"> 
</span><span class="cx">         if (this.resource &amp;&amp; this.resource.sourceMaps.length)
</span><span class="cx">             this.shouldRefreshChildren = true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onattach: function()
</del><ins>+    onattach()
</ins><span class="cx">     {
</span><span class="cx">         // Immediate superclasses are skipped, since Frames handle their own SourceMapResources.
</span><span class="cx">         WebInspector.GeneralTreeElement.prototype.onattach.call(this);
</span><span class="lines">@@ -142,9 +140,9 @@
</span><span class="cx">             WebInspector.notifications.addEventListener(WebInspector.Notification.PageArchiveStarted, this._pageArchiveStarted, this);
</span><span class="cx">             WebInspector.notifications.addEventListener(WebInspector.Notification.PageArchiveEnded, this._pageArchiveEnded, this);
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    ondetach: function()
</del><ins>+    ondetach()
</ins><span class="cx">     {
</span><span class="cx">         WebInspector.ResourceTreeElement.prototype.ondetach.call(this);
</span><span class="cx"> 
</span><span class="lines">@@ -152,11 +150,11 @@
</span><span class="cx">             WebInspector.notifications.removeEventListener(WebInspector.Notification.PageArchiveStarted, this._pageArchiveStarted, this);
</span><span class="cx">             WebInspector.notifications.removeEventListener(WebInspector.Notification.PageArchiveEnded, this._pageArchiveEnded, this);
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Overrides from FolderizedTreeElement (Protected).
</span><span class="cx"> 
</span><del>-    compareChildTreeElements: function(a, b)
</del><ins>+    compareChildTreeElements(a, b)
</ins><span class="cx">     {
</span><span class="cx">         if (a === b)
</span><span class="cx">             return 0;
</span><span class="lines">@@ -169,17 +167,17 @@
</span><span class="cx"> 
</span><span class="cx">         if (!aIsResource &amp;&amp; !bIsResource) {
</span><span class="cx">             // When both components are not resources then default to base class comparison.
</span><del>-            return WebInspector.ResourceTreeElement.prototype.compareChildTreeElements.call(this, a, b);
</del><ins>+            return super.compareChildTreeElements(a, b);
</ins><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         // Non-resources should appear before the resources.
</span><span class="cx">         // FIXME: There should be a better way to group the elements by their type.
</span><span class="cx">         return aIsResource ? 1 : -1;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Called from ResourceTreeElement.
</span><span class="cx"> 
</span><del>-    updateStatusForMainFrame: function()
</del><ins>+    updateStatusForMainFrame()
</ins><span class="cx">     {
</span><span class="cx">         function loadedImages()
</span><span class="cx">         {
</span><span class="lines">@@ -221,11 +219,11 @@
</span><span class="cx">                 loadedImages.call(this);
</span><span class="cx">             }.bind(this));
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Overrides from TreeElement (Private).
</span><span class="cx"> 
</span><del>-    onpopulate: function()
</del><ins>+    onpopulate()
</ins><span class="cx">     {
</span><span class="cx">         if (this.children.length &amp;&amp; !this.shouldRefreshChildren)
</span><span class="cx">             return;
</span><span class="lines">@@ -252,34 +250,34 @@
</span><span class="cx">         for (var flowKey in flowMap)
</span><span class="cx">             this.addChildForRepresentedObject(flowMap[flowKey]);
</span><span class="cx"> 
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onexpand: function()
</del><ins>+    onexpand()
</ins><span class="cx">     {
</span><span class="cx">         this._expandedSetting.value = true;
</span><span class="cx">         this._frame.domTree.requestContentFlowList();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    oncollapse: function()
</del><ins>+    oncollapse()
</ins><span class="cx">     {
</span><span class="cx">         // Only store the setting if we have children, since setting hasChildren to false will cause a collapse,
</span><span class="cx">         // and we only care about user triggered collapses.
</span><span class="cx">         if (this.hasChildren)
</span><span class="cx">             this._expandedSetting.value = false;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span><del>-    _updateExpandedSetting: function()
</del><ins>+    _updateExpandedSetting()
</ins><span class="cx">     {
</span><span class="cx">         this._expandedSetting = new WebInspector.Setting(&quot;frame-expanded-&quot; + this._frame.url.hash, this._frame.isMainFrame() ? true : false);
</span><span class="cx">         if (this._expandedSetting.value)
</span><span class="cx">             this.expand();
</span><span class="cx">         else
</span><span class="cx">             this.collapse();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _mainResourceDidChange: function(event)
</del><ins>+    _mainResourceDidChange(event)
</ins><span class="cx">     {
</span><span class="cx">         this._updateResource(this._frame.mainResource);
</span><span class="cx"> 
</span><span class="lines">@@ -294,56 +292,56 @@
</span><span class="cx">             this._updateDownloadButton();
</span><span class="cx"> 
</span><span class="cx">         this.shouldRefreshChildren = true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _resourceWasAdded: function(event)
</del><ins>+    _resourceWasAdded(event)
</ins><span class="cx">     {
</span><span class="cx">         this.addRepresentedObjectToNewChildQueue(event.data.resource);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _resourceWasRemoved: function(event)
</del><ins>+    _resourceWasRemoved(event)
</ins><span class="cx">     {
</span><span class="cx">         this.removeChildForRepresentedObject(event.data.resource);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _childFrameWasAdded: function(event)
</del><ins>+    _childFrameWasAdded(event)
</ins><span class="cx">     {
</span><span class="cx">         this.addRepresentedObjectToNewChildQueue(event.data.childFrame);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _childFrameWasRemoved: function(event)
</del><ins>+    _childFrameWasRemoved(event)
</ins><span class="cx">     {
</span><span class="cx">         this.removeChildForRepresentedObject(event.data.childFrame);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _childContentFlowWasAdded: function(event)
</del><ins>+    _childContentFlowWasAdded(event)
</ins><span class="cx">     {
</span><span class="cx">         this.addRepresentedObjectToNewChildQueue(event.data.flow);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _childContentFlowWasRemoved: function(event)
</del><ins>+    _childContentFlowWasRemoved(event)
</ins><span class="cx">     {
</span><span class="cx">         this.removeChildForRepresentedObject(event.data.flow);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _rootDOMNodeInvalidated: function()
</del><ins>+    _rootDOMNodeInvalidated()
</ins><span class="cx">     {
</span><span class="cx">         if (this.expanded)
</span><span class="cx">             this._frame.domTree.requestContentFlowList();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _reloadPageClicked: function(event)
</del><ins>+    _reloadPageClicked(event)
</ins><span class="cx">     {
</span><span class="cx">         // Ignore cache when the shift key is pressed.
</span><span class="cx">         PageAgent.reload(event.data.shiftKey);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _downloadButtonClicked: function(event)
</del><ins>+    _downloadButtonClicked(event)
</ins><span class="cx">     {
</span><span class="cx">         WebInspector.archiveMainFrame();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _updateDownloadButton: function()
</del><ins>+    _updateDownloadButton()
</ins><span class="cx">     {
</span><span class="cx">         console.assert(this._frame.isMainFrame());
</span><span class="cx">         if (!this._downloadButton)
</span><span class="lines">@@ -360,15 +358,15 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this._downloadButton.enabled = WebInspector.canArchiveMainFrame();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _pageArchiveStarted: function(event)
</del><ins>+    _pageArchiveStarted(event)
</ins><span class="cx">     {
</span><span class="cx">         this._downloadingPage = true;
</span><span class="cx">         this._updateDownloadButton();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _pageArchiveEnded: function(event)
</del><ins>+    _pageArchiveEnded(event)
</ins><span class="cx">     {
</span><span class="cx">         this._downloadingPage = false;
</span><span class="cx">         this._updateDownloadButton();
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsGeneralTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -23,73 +23,56 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.GeneralTreeElement = function(classNames, title, subtitle, representedObject, hasChildren)
</del><ins>+WebInspector.GeneralTreeElement = class GeneralTreeElement extends WebInspector.TreeElement
</ins><span class="cx"> {
</span><del>-    TreeElement.call(this, &quot;&quot;, representedObject, hasChildren);
</del><ins>+    constructor(classNames, title, subtitle, representedObject, hasChildren)
+    {
+        super(&quot;&quot;, representedObject, hasChildren);
</ins><span class="cx"> 
</span><del>-    this.classNames = classNames;
</del><ins>+        this.classNames = classNames;
</ins><span class="cx"> 
</span><del>-    this._tooltipHandledSeparately = false;
-    this._mainTitle = title || &quot;&quot;;
-    this._subtitle = subtitle || &quot;&quot;;
-    this._status = &quot;&quot;;
-};
</del><ins>+        this._tooltipHandledSeparately = false;
+        this._mainTitle = title || &quot;&quot;;
+        this._subtitle = subtitle || &quot;&quot;;
+        this._status = &quot;&quot;;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.GeneralTreeElement.StyleClassName = &quot;item&quot;;
-WebInspector.GeneralTreeElement.DisclosureButtonStyleClassName = &quot;disclosure-button&quot;;
-WebInspector.GeneralTreeElement.IconElementStyleClassName = &quot;icon&quot;;
-WebInspector.GeneralTreeElement.StatusElementStyleClassName = &quot;status&quot;;
-WebInspector.GeneralTreeElement.TitlesElementStyleClassName = &quot;titles&quot;;
-WebInspector.GeneralTreeElement.MainTitleElementStyleClassName = &quot;title&quot;;
-WebInspector.GeneralTreeElement.SubtitleElementStyleClassName = &quot;subtitle&quot;;
-WebInspector.GeneralTreeElement.NoSubtitleStyleClassName = &quot;no-subtitle&quot;;
-WebInspector.GeneralTreeElement.SmallStyleClassName = &quot;small&quot;;
-WebInspector.GeneralTreeElement.TwoLineStyleClassName = &quot;two-line&quot;;
-
-WebInspector.GeneralTreeElement.Event = {
-    MainTitleDidChange: &quot;general-tree-element-main-title-did-change&quot;
-};
-
-WebInspector.GeneralTreeElement.prototype = {
-    constructor: WebInspector.GeneralTreeElement,
-    __proto__: TreeElement.prototype,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get element()
</span><span class="cx">     {
</span><span class="cx">         return this._listItemNode;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get iconElement()
</span><span class="cx">     {
</span><span class="cx">         this._createElementsIfNeeded();
</span><span class="cx">         return this._iconElement;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get titlesElement()
</span><span class="cx">     {
</span><span class="cx">         this._createElementsIfNeeded();
</span><span class="cx">         return this._titlesElement;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get mainTitleElement()
</span><span class="cx">     {
</span><span class="cx">         this._createElementsIfNeeded();
</span><span class="cx">         return this._mainTitleElement;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get subtitleElement()
</span><span class="cx">     {
</span><span class="cx">         this._createElementsIfNeeded();
</span><span class="cx">         this._createSubtitleElementIfNeeded();
</span><span class="cx">         return this._subtitleElement;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get classNames()
</span><span class="cx">     {
</span><span class="cx">         return this._classNames;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set classNames(x)
</span><span class="cx">     {
</span><span class="lines">@@ -107,9 +90,9 @@
</span><span class="cx">             for (var i = 0; i &lt; this._classNames.length; ++i)
</span><span class="cx">                 this._listItemNode.classList.add(this._classNames[i]);
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    addClassName: function(className)
</del><ins>+    addClassName(className)
</ins><span class="cx">     {
</span><span class="cx">         if (this._classNames.contains(className))
</span><span class="cx">             return;
</span><span class="lines">@@ -118,9 +101,9 @@
</span><span class="cx"> 
</span><span class="cx">         if (this._listItemNode)
</span><span class="cx">             this._listItemNode.classList.add(className);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    removeClassName: function(className)
</del><ins>+    removeClassName(className)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._classNames.contains(className))
</span><span class="cx">             return;
</span><span class="lines">@@ -129,12 +112,12 @@
</span><span class="cx"> 
</span><span class="cx">         if (this._listItemNode)
</span><span class="cx">             this._listItemNode.classList.remove(className);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get small()
</span><span class="cx">     {
</span><span class="cx">         return this._small;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set small(x)
</span><span class="cx">     {
</span><span class="lines">@@ -146,12 +129,12 @@
</span><span class="cx">             else
</span><span class="cx">                 this._listItemNode.classList.remove(WebInspector.GeneralTreeElement.SmallStyleClassName);
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get twoLine()
</span><span class="cx">     {
</span><span class="cx">         return this._twoLine;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set twoLine(x)
</span><span class="cx">     {
</span><span class="lines">@@ -163,12 +146,12 @@
</span><span class="cx">             else
</span><span class="cx">                 this._listItemNode.classList.remove(WebInspector.GeneralTreeElement.TwoLineStyleClassName);
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get mainTitle()
</span><span class="cx">     {
</span><span class="cx">         return this._mainTitle;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set mainTitle(x)
</span><span class="cx">     {
</span><span class="lines">@@ -176,24 +159,24 @@
</span><span class="cx">         this._updateTitleElements();
</span><span class="cx">         this.didChange();
</span><span class="cx">         this.dispatchEventToListeners(WebInspector.GeneralTreeElement.Event.MainTitleDidChange);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get subtitle()
</span><span class="cx">     {
</span><span class="cx">         return this._subtitle;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set subtitle(x)
</span><span class="cx">     {
</span><span class="cx">         this._subtitle = x || &quot;&quot;;
</span><span class="cx">         this._updateTitleElements();
</span><span class="cx">         this.didChange();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get status()
</span><span class="cx">     {
</span><span class="cx">         return this._status;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set status(x)
</span><span class="cx">     {
</span><span class="lines">@@ -207,36 +190,36 @@
</span><span class="cx"> 
</span><span class="cx">         this._status = x || &quot;&quot;;
</span><span class="cx">         this._updateStatusElement();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get filterableData()
</span><span class="cx">     {
</span><span class="cx">         return {text: [this.mainTitle, this.subtitle]};
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get tooltipHandledSeparately()
</span><span class="cx">     {
</span><span class="cx">         return this._tooltipHandledSeparately;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set tooltipHandledSeparately(x)
</span><span class="cx">     {
</span><span class="cx">         this._tooltipHandledSeparately = x || false;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Overrides from TreeElement (Private)
</span><span class="cx"> 
</span><del>-    isEventWithinDisclosureTriangle: function(event)
</del><ins>+    isEventWithinDisclosureTriangle(event)
</ins><span class="cx">     {
</span><span class="cx">         return event.target === this._disclosureButton;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onattach: function()
</del><ins>+    onattach()
</ins><span class="cx">     {
</span><span class="cx">         this._createElementsIfNeeded();
</span><span class="cx">         this._updateTitleElements();
</span><span class="cx"> 
</span><del>-        this._listItemNode.classList.add(WebInspector.GeneralTreeElement.StyleClassName);
</del><ins>+        this._listItemNode.classList.add(&quot;item&quot;);
</ins><span class="cx"> 
</span><span class="cx">         if (this._classNames) {
</span><span class="cx">             for (var i = 0; i &lt; this._classNames.length; ++i)
</span><span class="lines">@@ -264,25 +247,25 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this._updateStatusElement();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    ondetach: function()
</del><ins>+    ondetach()
</ins><span class="cx">     {
</span><span class="cx">         if (this._boundContextMenuEventHandler) {
</span><span class="cx">             this._listItemNode.removeEventListener(&quot;contextmenu&quot;, this._boundContextMenuEventHandler, true);
</span><span class="cx">             delete this._boundContextMenuEventHandler;
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onreveal: function()
</del><ins>+    onreveal()
</ins><span class="cx">     {
</span><span class="cx">         if (this._listItemNode)
</span><span class="cx">             this._listItemNode.scrollIntoViewIfNeeded(false);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Protected
</span><span class="cx"> 
</span><del>-    callFirstAncestorFunction: function(functionName, args)
</del><ins>+    callFirstAncestorFunction(functionName, args)
</ins><span class="cx">     {
</span><span class="cx">         // Call the first ancestor that implements a function named functionName (if any).
</span><span class="cx">         var currentNode = this.parent;
</span><span class="lines">@@ -294,11 +277,11 @@
</span><span class="cx"> 
</span><span class="cx">             currentNode = currentNode.parent;
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span><del>-    _createElementsIfNeeded: function()
</del><ins>+    _createElementsIfNeeded()
</ins><span class="cx">     {
</span><span class="cx">         if (this._createdElements)
</span><span class="cx">             return;
</span><span class="lines">@@ -321,9 +304,9 @@
</span><span class="cx">         this._titlesElement.appendChild(this._mainTitleElement);
</span><span class="cx"> 
</span><span class="cx">         this._createdElements = true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _createSubtitleElementIfNeeded: function()
</del><ins>+    _createSubtitleElementIfNeeded()
</ins><span class="cx">     {
</span><span class="cx">         if (this._subtitleElement)
</span><span class="cx">             return;
</span><span class="lines">@@ -331,9 +314,9 @@
</span><span class="cx">         this._subtitleElement = document.createElement(&quot;span&quot;);
</span><span class="cx">         this._subtitleElement.className = WebInspector.GeneralTreeElement.SubtitleElementStyleClassName;
</span><span class="cx">         this._titlesElement.appendChild(this._subtitleElement);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _updateTitleElements: function()
</del><ins>+    _updateTitleElements()
</ins><span class="cx">     {
</span><span class="cx">         if (!this._createdElements)
</span><span class="cx">             return;
</span><span class="lines">@@ -377,9 +360,9 @@
</span><span class="cx">             else
</span><span class="cx">                 this._listItemNode.title = subtitleText;
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _updateStatusElement: function()
</del><ins>+    _updateStatusElement()
</ins><span class="cx">     {
</span><span class="cx">         if (!this._statusElement)
</span><span class="cx">             return;
</span><span class="lines">@@ -394,3 +377,17 @@
</span><span class="cx">             this._statusElement.textContent = this._status;
</span><span class="cx">     }
</span><span class="cx"> };
</span><ins>+
+WebInspector.GeneralTreeElement.DisclosureButtonStyleClassName = &quot;disclosure-button&quot;;
+WebInspector.GeneralTreeElement.IconElementStyleClassName = &quot;icon&quot;;
+WebInspector.GeneralTreeElement.StatusElementStyleClassName = &quot;status&quot;;
+WebInspector.GeneralTreeElement.TitlesElementStyleClassName = &quot;titles&quot;;
+WebInspector.GeneralTreeElement.MainTitleElementStyleClassName = &quot;title&quot;;
+WebInspector.GeneralTreeElement.SubtitleElementStyleClassName = &quot;subtitle&quot;;
+WebInspector.GeneralTreeElement.NoSubtitleStyleClassName = &quot;no-subtitle&quot;;
+WebInspector.GeneralTreeElement.SmallStyleClassName = &quot;small&quot;;
+WebInspector.GeneralTreeElement.TwoLineStyleClassName = &quot;two-line&quot;;
+
+WebInspector.GeneralTreeElement.Event = {
+    MainTitleDidChange: &quot;general-tree-element-main-title-did-change&quot;
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsIndexedDatabaseHostTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseHostTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseHostTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseHostTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -23,25 +23,23 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.IndexedDatabaseHostTreeElement = function(host)
</del><ins>+WebInspector.IndexedDatabaseHostTreeElement = class IndexedDatabaseHostTreeElement extends WebInspector.StorageTreeElement
</ins><span class="cx"> {
</span><del>-    WebInspector.StorageTreeElement.call(this, WebInspector.FolderTreeElement.FolderIconStyleClassName, WebInspector.displayNameForHost(host), null);
</del><ins>+    constructor(host)
+    {
+        super(WebInspector.FolderTreeElement.FolderIconStyleClassName, WebInspector.displayNameForHost(host), null);
</ins><span class="cx"> 
</span><del>-    this._host = host;
</del><ins>+        this._host = host;
</ins><span class="cx"> 
</span><del>-    this.hasChildren = true;
-};
</del><ins>+        this.hasChildren = true;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.IndexedDatabaseHostTreeElement.prototype = {
-    constructor: WebInspector.IndexedDatabaseHostTreeElement,
-    __proto__: WebInspector.StorageTreeElement.prototype,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get name()
</span><span class="cx">     {
</span><span class="cx">         return WebInspector.displayNameForHost(this._host);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get categoryName()
</span><span class="cx">     {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsIndexedDatabaseObjectStoreIndexTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -23,23 +23,19 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.IndexedDatabaseObjectStoreIndexTreeElement = function(objectStoreIndex)
</del><ins>+WebInspector.IndexedDatabaseObjectStoreIndexTreeElement = class IndexedDatabaseObjectStoreIndexTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(objectStoreIndex instanceof WebInspector.IndexedDatabaseObjectStoreIndex);
</del><ins>+    constructor(objectStoreIndex)
+    {
+        console.assert(objectStoreIndex instanceof WebInspector.IndexedDatabaseObjectStoreIndex);
</ins><span class="cx"> 
</span><del>-    this._objectStoreIndex = objectStoreIndex;
</del><ins>+        super(&quot;database-table-icon&quot;, objectStoreIndex.name, null, objectStoreIndex, false);
</ins><span class="cx"> 
</span><del>-    WebInspector.GeneralTreeElement.call(this, WebInspector.IndexedDatabaseObjectStoreTreeElement.IconStyleClassName, objectStoreIndex.name, null, objectStoreIndex, false);
</del><ins>+        this._objectStoreIndex = objectStoreIndex;
</ins><span class="cx"> 
</span><del>-    this.small = true;
-};
</del><ins>+        this.small = true;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.IndexedDatabaseObjectStoreIndexTreeElement.IconStyleClassName = &quot;database-table-icon&quot;;
-
-WebInspector.IndexedDatabaseObjectStoreIndexTreeElement.prototype = {
-    constructor: WebInspector.IndexedDatabaseObjectStoreIndexTreeElement,
-    __proto__: WebInspector.GeneralTreeElement.prototype,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get objectStoreIndex()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsIndexedDatabaseObjectStoreTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2014 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,38 +23,34 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.IndexedDatabaseObjectStoreTreeElement = function(objectStore)
</del><ins>+WebInspector.IndexedDatabaseObjectStoreTreeElement = class IndexedDatabaseObjectStoreTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(objectStore instanceof WebInspector.IndexedDatabaseObjectStore);
</del><ins>+    constructor(objectStore)
+    {
+        console.assert(objectStore instanceof WebInspector.IndexedDatabaseObjectStore);
</ins><span class="cx"> 
</span><del>-    this._objectStore = objectStore;
</del><ins>+        super(WebInspector.IndexedDatabaseObjectStoreTreeElement.IconStyleClassName, objectStore.name, null, objectStore, !!this._objectStore.indexes.length);
</ins><span class="cx"> 
</span><del>-    WebInspector.GeneralTreeElement.call(this, WebInspector.IndexedDatabaseObjectStoreTreeElement.IconStyleClassName, objectStore.name, null, objectStore, !!this._objectStore.indexes.length);
</del><ins>+        this._objectStore = objectStore;
</ins><span class="cx"> 
</span><del>-    this.small = true;
-};
</del><ins>+        this.small = true;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.IndexedDatabaseObjectStoreTreeElement.IconStyleClassName = &quot;database-table-icon&quot;;
-
-WebInspector.IndexedDatabaseObjectStoreTreeElement.prototype = {
-    constructor: WebInspector.IndexedDatabaseObjectStoreTreeElement,
-    __proto__: WebInspector.GeneralTreeElement.prototype,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get objectStore()
</span><span class="cx">     {
</span><span class="cx">         return this._objectStore;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Overrides from TreeElement (Protected)
</span><span class="cx"> 
</span><del>-    oncollapse: function()
</del><ins>+    oncollapse()
</ins><span class="cx">     {
</span><span class="cx">         this.shouldRefreshChildren = true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onpopulate: function()
</del><ins>+    onpopulate()
</ins><span class="cx">     {
</span><span class="cx">         if (this.children.length &amp;&amp; !this.shouldRefreshChildren)
</span><span class="cx">             return;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsIndexedDatabaseTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2014 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,37 +23,34 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.IndexedDatabaseTreeElement = function(indexedDatabase)
</del><ins>+WebInspector.IndexedDatabaseTreeElement = class IndexedDatabaseTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(indexedDatabase instanceof WebInspector.IndexedDatabase);
</del><ins>+    constructor(indexedDatabase)
+    {
+        console.assert(indexedDatabase instanceof WebInspector.IndexedDatabase);
</ins><span class="cx"> 
</span><del>-    this._indexedDatabase = indexedDatabase;
</del><ins>+        this._indexedDatabase = indexedDatabase;
</ins><span class="cx"> 
</span><del>-    WebInspector.GeneralTreeElement.call(this, WebInspector.IndexedDatabaseTreeElement.IconStyleClassName, indexedDatabase.name, null, indexedDatabase, !!this._indexedDatabase.objectStores.length);
</del><ins>+        super(&quot;database-icon&quot;, indexedDatabase.name, null, indexedDatabase, !!this._indexedDatabase.objectStores.length);
</ins><span class="cx"> 
</span><del>-    this.small = true;
-};
</del><ins>+        this.small = true;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.IndexedDatabaseTreeElement.IconStyleClassName = &quot;database-icon&quot;;
-
-WebInspector.IndexedDatabaseTreeElement.prototype = {
-    constructor: WebInspector.IndexedDatabaseTreeElement,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get indexedDatabase()
</span><span class="cx">     {
</span><span class="cx">         return this._indexedDatabase;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Overrides from TreeElement (Protected)
</span><span class="cx"> 
</span><del>-    oncollapse: function()
</del><ins>+    oncollapse()
</ins><span class="cx">     {
</span><span class="cx">         this.shouldRefreshChildren = true;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onpopulate: function()
</del><ins>+    onpopulate()
</ins><span class="cx">     {
</span><span class="cx">         if (this.children.length &amp;&amp; !this.shouldRefreshChildren)
</span><span class="cx">             return;
</span><span class="lines">@@ -66,5 +63,3 @@
</span><span class="cx">             this.appendChild(new WebInspector.IndexedDatabaseObjectStoreTreeElement(objectStore));
</span><span class="cx">     }
</span><span class="cx"> };
</span><del>-
-WebInspector.IndexedDatabaseTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLegacyConsoleMessageImpljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LegacyConsoleMessageImpl.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LegacyConsoleMessageImpl.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LegacyConsoleMessageImpl.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -139,10 +139,10 @@
</span><span class="cx">         if (this._shouldDumpStackTrace()) {
</span><span class="cx">             var ol = document.createElement(&quot;ol&quot;);
</span><span class="cx">             ol.className = &quot;outline-disclosure&quot;;
</span><del>-            var treeOutline = new TreeOutline(ol);
</del><ins>+            var treeOutline = new WebInspector.TreeOutline(ol);
</ins><span class="cx"> 
</span><span class="cx">             var content = this._formattedMessage;
</span><del>-            var root = new TreeElement(content, null, true);
</del><ins>+            var root = new WebInspector.TreeElement(content, null, true);
</ins><span class="cx">             content.treeElementForTest = root;
</span><span class="cx">             treeOutline.appendChild(root);
</span><span class="cx">             if (this.type === WebInspector.LegacyConsoleMessage.MessageType.Trace)
</span><span class="lines">@@ -620,7 +620,7 @@
</span><span class="cx">                 content.appendChild(urlElement);
</span><span class="cx">             }
</span><span class="cx"> 
</span><del>-            var treeElement = new TreeElement(content);
</del><ins>+            var treeElement = new WebInspector.TreeElement(content);
</ins><span class="cx">             parentTreeElement.appendChild(treeElement);
</span><span class="cx">         }
</span><span class="cx">     },
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLogTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,22 +23,19 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.LogTreeElement = function(representedObject)
</del><ins>+WebInspector.LogTreeElement = class LogTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(representedObject instanceof WebInspector.LogObject);
</del><ins>+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.LogObject);
</ins><span class="cx"> 
</span><del>-    WebInspector.GeneralTreeElement.call(this, WebInspector.LogTreeElement.StyleClassName, WebInspector.UIString(&quot;Console&quot;), representedObject.startDate.toLocaleTimeString(), representedObject, false);
</del><ins>+        super(&quot;log-icon&quot;, WebInspector.UIString(&quot;Console&quot;), representedObject.startDate.toLocaleTimeString(), representedObject, false);
</ins><span class="cx"> 
</span><del>-    this._logObject = representedObject;
</del><ins>+        this._logObject = representedObject;
</ins><span class="cx"> 
</span><del>-    this.small = true;
-};
</del><ins>+        this.small = true;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.LogTreeElement.StyleClassName = &quot;log-icon&quot;;
-
-WebInspector.LogTreeElement.prototype = {
-    constructor: WebInspector.LogTreeElement,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get logObject()
</span><span class="lines">@@ -46,5 +43,3 @@
</span><span class="cx">         return this._logObject;
</span><span class="cx">     }
</span><span class="cx"> };
</span><del>-
-WebInspector.LogTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -157,7 +157,7 @@
</span><span class="cx">             contentTreeOutlineElement.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
</span><span class="cx">         this.contentElement.appendChild(contentTreeOutlineElement);
</span><span class="cx"> 
</span><del>-        var contentTreeOutline = new TreeOutline(contentTreeOutlineElement);
</del><ins>+        var contentTreeOutline = new WebInspector.TreeOutline(contentTreeOutlineElement);
</ins><span class="cx">         contentTreeOutline.allowsRepeatSelection = true;
</span><span class="cx"> 
</span><span class="cx">         if (!suppressFiltering) {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeArrayIndexTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -23,24 +23,22 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.ObjectTreeArrayIndexTreeElement = function(property, propertyPath)
</del><ins>+WebInspector.ObjectTreeArrayIndexTreeElement = class ObjectTreeArrayIndexTreeElement extends WebInspector.ObjectTreeBaseTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(property.isIndexProperty(), &quot;ArrayIndexTreeElement expects numeric property names&quot;);
</del><ins>+    constructor(property, propertyPath)
+    {
+        console.assert(property.isIndexProperty(), &quot;ObjectTreeArrayIndexTreeElement expects numeric property names&quot;);
</ins><span class="cx"> 
</span><del>-    WebInspector.ObjectTreeBaseTreeElement.call(this, property, propertyPath, property);
</del><ins>+        super(property, propertyPath, property);
</ins><span class="cx"> 
</span><del>-    this.mainTitle = this._titleFragment();
-    this.addClassName(&quot;object-tree-property&quot;);
-    this.addClassName(&quot;object-tree-array-index&quot;);
</del><ins>+        this.mainTitle = this._titleFragment();
+        this.addClassName(&quot;object-tree-property&quot;);
+        this.addClassName(&quot;object-tree-array-index&quot;);
</ins><span class="cx"> 
</span><del>-    if (!this.property.hasValue())
-        this.addClassName(&quot;accessor&quot;);
-};
</del><ins>+        if (!this.property.hasValue())
+            this.addClassName(&quot;accessor&quot;);
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.ObjectTreeArrayIndexTreeElement.prototype = {
-    constructor: WebInspector.ObjectTreeArrayIndexTreeElement,
-    __proto__: WebInspector.ObjectTreeBaseTreeElement.prototype,
-
</del><span class="cx">     // Protected
</span><span class="cx"> 
</span><span class="cx">     invokedGetter()
</span><span class="lines">@@ -48,7 +46,7 @@
</span><span class="cx">         this.mainTitle = this._titleFragment();
</span><span class="cx"> 
</span><span class="cx">         this.removeClassName(&quot;accessor&quot;);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeBaseTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -23,45 +23,43 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.ObjectTreeBaseTreeElement = function(representedObject, propertyPath, property)
</del><ins>+WebInspector.ObjectTreeBaseTreeElement = class ObjectTreeBaseTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(representedObject);
-    console.assert(propertyPath instanceof WebInspector.PropertyPath);
-    console.assert(!property || property instanceof WebInspector.PropertyDescriptor);
</del><ins>+    constructor(representedObject, propertyPath, property)
+    {
+        console.assert(representedObject);
+        console.assert(propertyPath instanceof WebInspector.PropertyPath);
+        console.assert(!property || property instanceof WebInspector.PropertyDescriptor);
</ins><span class="cx"> 
</span><del>-    this._property = property;
-    this._propertyPath = propertyPath;
</del><ins>+        super(null, null, null, representedObject, false);
</ins><span class="cx"> 
</span><del>-    WebInspector.GeneralTreeElement.call(this, null, null, null, representedObject, false);
</del><ins>+        this._property = property;
+        this._propertyPath = propertyPath;
</ins><span class="cx"> 
</span><del>-    this.small = true;
-    this.toggleOnClick = true;
-    this.selectable = false;
-    this.tooltipHandledSeparately = true;
-};
</del><ins>+        this.small = true;
+        this.toggleOnClick = true;
+        this.selectable = false;
+        this.tooltipHandledSeparately = true;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.ObjectTreeBaseTreeElement.prototype = {
-    constructor: WebInspector.ObjectTreeBaseTreeElement,
-    __proto__: WebInspector.GeneralTreeElement.prototype,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get property()
</span><span class="cx">     {
</span><span class="cx">         return this._property;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get propertyPath()
</span><span class="cx">     {
</span><span class="cx">         return this._propertyPath;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Protected
</span><span class="cx"> 
</span><span class="cx">     oncontextmenu(event)
</span><span class="cx">     {
</span><span class="cx">         this._contextMenuHandler(event);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     resolvedValue()
</span><span class="cx">     {
</span><span class="lines">@@ -71,7 +69,7 @@
</span><span class="cx">         if (this._property.hasValue())
</span><span class="cx">             return this._property.value;
</span><span class="cx">         return null;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     resolvedValuePropertyPath()
</span><span class="cx">     {
</span><span class="lines">@@ -81,19 +79,19 @@
</span><span class="cx">         if (this._property.hasValue())
</span><span class="cx">             return this._propertyPath.appendPropertyDescriptor(this._property.value, this._property, WebInspector.PropertyPath.Type.Value);
</span><span class="cx">         return null;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     thisPropertyPath()
</span><span class="cx">     {
</span><span class="cx">         console.assert(this._property);
</span><span class="cx">         return this._propertyPath.appendPropertyDescriptor(null, this._property, this.propertyPathType());
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     hadError()
</span><span class="cx">     {
</span><span class="cx">         console.assert(this._property);
</span><span class="cx">         return this._property.wasThrown || this._getterHadError;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     propertyPathType()
</span><span class="cx">     {
</span><span class="lines">@@ -105,7 +103,7 @@
</span><span class="cx">         if (this._property.hasSetter())
</span><span class="cx">             return WebInspector.PropertyPath.Type.Setter;
</span><span class="cx">         return WebInspector.PropertyPath.Type.Value;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     propertyPathString(propertyPath)
</span><span class="cx">     {
</span><span class="lines">@@ -113,7 +111,7 @@
</span><span class="cx">             return WebInspector.UIString(&quot;Unable to determine path to property from root&quot;);
</span><span class="cx"> 
</span><span class="cx">         return propertyPath.displayPath(this.propertyPathType());
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     createInteractiveGetterElement()
</span><span class="cx">     {
</span><span class="lines">@@ -134,7 +132,7 @@
</span><span class="cx">         }.bind(this));
</span><span class="cx"> 
</span><span class="cx">         return getterElement;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     createReadOnlyIconElement()
</span><span class="cx">     {
</span><span class="lines">@@ -142,7 +140,7 @@
</span><span class="cx">         readOnlyElement.className = &quot;read-only&quot;;
</span><span class="cx">         readOnlyElement.title = WebInspector.UIString(&quot;Read only&quot;);
</span><span class="cx">         return readOnlyElement;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span><span class="lines">@@ -160,7 +158,7 @@
</span><span class="cx">             WebInspector.quickConsole.prompt.pushHistoryItem(text);
</span><span class="cx"> 
</span><span class="cx">         WebInspector.consoleLogViewController.appendImmediateExecutionWithResult(text, resolvedValue);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     _contextMenuHandler(event)
</span><span class="cx">     {
</span><span class="lines">@@ -184,7 +182,7 @@
</span><span class="cx"> 
</span><span class="cx">         if (!contextMenu.isEmpty())
</span><span class="cx">             contextMenu.show();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     _appendMenusItemsForObject(contextMenu, resolvedValue)
</span><span class="cx">     {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeMapEntryTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeMapEntryTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeMapEntryTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeMapEntryTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -23,42 +23,40 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.ObjectTreeMapEntryTreeElement = function(object, propertyPath)
</del><ins>+WebInspector.ObjectTreeMapEntryTreeElement = class ObjectTreeMapEntryTreeElement extends WebInspector.ObjectTreeBaseTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(object instanceof WebInspector.RemoteObject);
</del><ins>+    constructor(object, propertyPath)
+    {
+        console.assert(object instanceof WebInspector.RemoteObject);
</ins><span class="cx"> 
</span><del>-    this._object = object;
</del><ins>+        // Treat the same as an array-index just with different strings and widths.
+        super(this._object, propertyPath);
</ins><span class="cx"> 
</span><del>-    // Treat the same as an array-index just with different strings and widths.
-    WebInspector.ObjectTreeBaseTreeElement.call(this, this._object, propertyPath);
</del><ins>+        this._object = object;
</ins><span class="cx"> 
</span><del>-    this.mainTitle = this._titleFragment();
-    this.addClassName(&quot;object-tree-array-index&quot;);
-    this.addClassName(&quot;object-tree-map-entry&quot;);
-};
</del><ins>+        this.mainTitle = this._titleFragment();
+        this.addClassName(&quot;object-tree-array-index&quot;);
+        this.addClassName(&quot;object-tree-map-entry&quot;);
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.ObjectTreeMapEntryTreeElement.prototype = {
-    constructor: WebInspector.ObjectTreeMapEntryTreeElement,
-    __proto__: WebInspector.ObjectTreeBaseTreeElement.prototype,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get object()
</span><span class="cx">     {
</span><span class="cx">         return this._object;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Protected
</span><span class="cx"> 
</span><span class="cx">     resolvedValue()
</span><span class="cx">     {
</span><span class="cx">         return this._object;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     propertyPathType()
</span><span class="cx">     {
</span><span class="cx">         return WebInspector.PropertyPath.Type.Value;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span><span class="lines">@@ -83,23 +81,21 @@
</span><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span><del>-
-WebInspector.ObjectTreeMapKeyTreeElement = function(object, propertyPath)
</del><ins>+WebInspector.ObjectTreeMapKeyTreeElement = class ObjectTreeMapKeyTreeElement extends WebInspector.ObjectTreeMapEntryTreeElement
</ins><span class="cx"> {
</span><del>-    WebInspector.ObjectTreeMapEntryTreeElement.call(this, object, propertyPath);
-    this.addClassName(&quot;key&quot;);
-};
</del><ins>+    constructor(object, propertyPath)
+    {
+        super(object, propertyPath);
</ins><span class="cx"> 
</span><del>-WebInspector.ObjectTreeMapKeyTreeElement.prototype = {
-    constructor: WebInspector.ObjectTreeMapKeyTreeElement,
-    __proto__: WebInspector.ObjectTreeMapEntryTreeElement.prototype,
-
</del><ins>+        this.addClassName(&quot;key&quot;);
+    }
+    
</ins><span class="cx">     // Protected
</span><span class="cx"> 
</span><span class="cx">     displayPropertyName()
</span><span class="cx">     {
</span><span class="cx">         return WebInspector.UIString(&quot;key&quot;);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     resolvedValuePropertyPath()
</span><span class="cx">     {
</span><span class="lines">@@ -107,24 +103,23 @@
</span><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span><del>-
-WebInspector.ObjectTreeMapValueTreeElement = function(object, propertyPath, key)
</del><ins>+WebInspector.ObjectTreeMapValueTreeElement = class ObjectTreeMapValueTreeElement extends WebInspector.ObjectTreeMapEntryTreeElement
</ins><span class="cx"> {
</span><del>-    this._key = key;
-    WebInspector.ObjectTreeMapEntryTreeElement.call(this, object, propertyPath);
-    this.addClassName(&quot;value&quot;);
-};
</del><ins>+    constructor(object, propertyPath, key)
+    {
+        super(object, propertyPath);
</ins><span class="cx"> 
</span><del>-WebInspector.ObjectTreeMapValueTreeElement.prototype = {
-    constructor: WebInspector.ObjectTreeMapValueTreeElement,
-    __proto__: WebInspector.ObjectTreeMapEntryTreeElement.prototype,
</del><ins>+        this._key = key;
</ins><span class="cx"> 
</span><ins>+        this.addClassName(&quot;value&quot;);
+    }
+    
</ins><span class="cx">     // Protected
</span><span class="cx"> 
</span><span class="cx">     displayPropertyName()
</span><span class="cx">     {
</span><span class="cx">         return WebInspector.UIString(&quot;value&quot;);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     resolvedValuePropertyPath()
</span><span class="cx">     {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreePropertyTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -23,54 +23,52 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.ObjectTreePropertyTreeElement = function(property, propertyPath, mode, prototypeName)
</del><ins>+WebInspector.ObjectTreePropertyTreeElement = class ObjectTreePropertyTreeElement extends WebInspector.ObjectTreeBaseTreeElement
</ins><span class="cx"> {
</span><del>-    this._mode = mode || WebInspector.ObjectTreeView.Mode.Properties;
-    this._prototypeName = prototypeName;
</del><ins>+    constructor(property, propertyPath, mode, prototypeName)
+    {
+        super(property, propertyPath, property);
</ins><span class="cx"> 
</span><del>-    WebInspector.ObjectTreeBaseTreeElement.call(this, property, propertyPath, property);
</del><ins>+        this._mode = mode || WebInspector.ObjectTreeView.Mode.Properties;
+        this._prototypeName = prototypeName;
</ins><span class="cx"> 
</span><del>-    this.mainTitle = this._titleFragment();
-    this.addClassName(&quot;object-tree-property&quot;);
</del><ins>+        this.mainTitle = this._titleFragment();
+        this.addClassName(&quot;object-tree-property&quot;);
</ins><span class="cx"> 
</span><del>-    if (this.property.hasValue()) {
-        this.addClassName(this.property.value.type);
-        if (this.property.value.subtype)
-            this.addClassName(this.property.value.subtype);
-    } else
-        this.addClassName(&quot;accessor&quot;);
</del><ins>+        if (this.property.hasValue()) {
+            this.addClassName(this.property.value.type);
+            if (this.property.value.subtype)
+                this.addClassName(this.property.value.subtype);
+        } else
+            this.addClassName(&quot;accessor&quot;);
</ins><span class="cx"> 
</span><del>-    if (this.property.wasThrown)
-        this.addClassName(&quot;had-error&quot;);
-    if (this.property.name === &quot;__proto__&quot;)
-        this.addClassName(&quot;prototype-property&quot;);
</del><ins>+        if (this.property.wasThrown)
+            this.addClassName(&quot;had-error&quot;);
+        if (this.property.name === &quot;__proto__&quot;)
+            this.addClassName(&quot;prototype-property&quot;);
</ins><span class="cx"> 
</span><del>-    this._updateTooltips();
-    this._updateHasChildren();
-};
-
-WebInspector.ObjectTreePropertyTreeElement.prototype = {
-    constructor: WebInspector.ObjectTreePropertyTreeElement,
-    __proto__: WebInspector.ObjectTreeBaseTreeElement.prototype,
-
</del><ins>+        this._updateTooltips();
+        this._updateHasChildren();
+    }
+    
</ins><span class="cx">     // Protected
</span><span class="cx"> 
</span><span class="cx">     onpopulate()
</span><span class="cx">     {
</span><span class="cx">         this._updateChildren();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     onexpand()
</span><span class="cx">     {
</span><span class="cx">         if (this._previewView)
</span><span class="cx">             this._previewView.showTitle();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     oncollapse()
</span><span class="cx">     {
</span><span class="cx">         if (this._previewView)
</span><span class="cx">             this._previewView.showPreview();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     invokedGetter()
</span><span class="cx">     {
</span><span class="lines">@@ -85,7 +83,7 @@
</span><span class="cx">         this.removeClassName(&quot;accessor&quot;);
</span><span class="cx"> 
</span><span class="cx">         this._updateHasChildren();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span><span class="lines">@@ -99,7 +97,7 @@
</span><span class="cx">             this.hasChildren = !wasThrown &amp;&amp; valueHasChildren;
</span><span class="cx">         else
</span><span class="cx">             this.hasChildren = !wasThrown &amp;&amp; valueHasChildren &amp;&amp; (this.property.name === &quot;__proto__&quot; || this._alwaysDisplayAsProperty());
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     _updateTooltips()
</span><span class="cx">     {
</span><span class="lines">@@ -113,7 +111,7 @@
</span><span class="cx">             attributes.push(&quot;writable&quot;);
</span><span class="cx"> 
</span><span class="cx">         this.iconElement.title = attributes.join(&quot; &quot;);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     _titleFragment()
</span><span class="cx">     {
</span><span class="lines">@@ -124,7 +122,7 @@
</span><span class="cx">             return this._createTitlePropertyStyle();
</span><span class="cx">         else
</span><span class="cx">             return this._createTitleAPIStyle();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     _createTitlePrototype()
</span><span class="cx">     {
</span><span class="lines">@@ -136,7 +134,7 @@
</span><span class="cx">         nameElement.textContent = WebInspector.UIString(&quot;%s Prototype&quot;).format(this._sanitizedPrototypeString(this.property.value));
</span><span class="cx">         nameElement.title = this.propertyPathString(this.thisPropertyPath());
</span><span class="cx">         return nameElement;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     _createTitlePropertyStyle()
</span><span class="cx">     {
</span><span class="lines">@@ -184,7 +182,7 @@
</span><span class="cx">         container.appendChild(nameElement);
</span><span class="cx">         container.appendChild(valueOrGetterElement);
</span><span class="cx">         return container;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     _createTitleAPIStyle()
</span><span class="cx">     {
</span><span class="lines">@@ -220,7 +218,7 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         return container;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     _alwaysDisplayAsProperty()
</span><span class="cx">     {
</span><span class="lines">@@ -237,12 +235,12 @@
</span><span class="cx">             return true;
</span><span class="cx"> 
</span><span class="cx">         return false;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     _functionPropertyString()
</span><span class="cx">     {
</span><span class="cx">         return &quot;function&quot; + this._functionParameterString();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     _functionParameterString()
</span><span class="cx">     {
</span><span class="lines">@@ -283,7 +281,7 @@
</span><span class="cx"> 
</span><span class="cx">         var match = resolvedValue.description.match(/^function.*?(\([^)]+?\))/);
</span><span class="cx">         return match ? match[1] : &quot;()&quot;;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     _sanitizedPrototypeString(value)
</span><span class="cx">     {
</span><span class="lines">@@ -296,7 +294,7 @@
</span><span class="cx">             return &quot;RegExp&quot;;
</span><span class="cx"> 
</span><span class="cx">         return value.description.replace(/Prototype$/, &quot;&quot;);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     _updateChildren()
</span><span class="cx">     {
</span><span class="lines">@@ -310,20 +308,20 @@
</span><span class="cx">             resolvedValue.getOwnPropertyDescriptors(this._updateChildrenInternal.bind(this, this._updateProperties, WebInspector.ObjectTreeView.Mode.API));
</span><span class="cx">         else
</span><span class="cx">             resolvedValue.getDisplayablePropertyDescriptors(this._updateChildrenInternal.bind(this, this._updateProperties, this._mode));
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     _updateChildrenInternal(handler, mode, list)
</span><span class="cx">     {
</span><span class="cx">         this.removeChildren();
</span><span class="cx"> 
</span><span class="cx">         if (!list) {
</span><del>-            var errorMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString(&quot;Could not fetch properties. Object may no longer exist.&quot;));
-            this.appendChild(new TreeElement(errorMessageElement, null, false));
</del><ins>+            var errorMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString(&quot;Could not fetch properties. Object may no longer exist.&quot;));
+            this.appendChild(new WebInspector.TreeElement(errorMessageElement, null, false));
</ins><span class="cx">             return;
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         handler.call(this, list, this.resolvedValuePropertyPath(), mode);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     _updateEntries(entries, propertyPath, mode)
</span><span class="cx">     {
</span><span class="lines">@@ -336,8 +334,8 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         if (!this.children.length) {
</span><del>-            var emptyMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString(&quot;No Entries.&quot;));
-            this.appendChild(new TreeElement(emptyMessageElement, null, false));
</del><ins>+            var emptyMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString(&quot;No Entries.&quot;));
+            this.appendChild(new WebInspector.TreeElement(emptyMessageElement, null, false));
</ins><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         // Show the prototype so users can see the API.
</span><span class="lines">@@ -346,11 +344,11 @@
</span><span class="cx">             if (propertyDescriptor)
</span><span class="cx">                 this.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, mode));
</span><span class="cx">         }.bind(this));
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     _updateProperties(properties, propertyPath, mode)
</span><span class="cx">     {
</span><del>-        properties.sort(WebInspector.ObjectTreeView.ComparePropertyDescriptors);
</del><ins>+        properties.sort(WebInspector.ObjectTreeView.comparePropertyDescriptors);
</ins><span class="cx"> 
</span><span class="cx">         var resolvedValue = this.resolvedValue();
</span><span class="cx">         var isArray = resolvedValue.isArray();
</span><span class="lines">@@ -380,8 +378,8 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         if (!this.children.length) {
</span><del>-            var emptyMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString(&quot;No Properties.&quot;));
-            this.appendChild(new TreeElement(emptyMessageElement, null, false));
</del><ins>+            var emptyMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString(&quot;No Properties.&quot;));
+            this.appendChild(new WebInspector.TreeElement(emptyMessageElement, null, false));
</ins><span class="cx">         }
</span><span class="cx">     }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeSetIndexTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeSetIndexTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeSetIndexTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeSetIndexTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -23,41 +23,39 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.ObjectTreeSetIndexTreeElement = function(object, propertyPath)
</del><ins>+WebInspector.ObjectTreeSetIndexTreeElement = class ObjectTreeSetIndexTreeElement extends WebInspector.ObjectTreeBaseTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(object instanceof WebInspector.RemoteObject);
</del><ins>+    constructor(object, propertyPath)
+    {
+        console.assert(object instanceof WebInspector.RemoteObject);
</ins><span class="cx"> 
</span><del>-    this._object = object;
</del><ins>+        // Treat the same as an array-index just with different strings and widths.
+        super(object, propertyPath);
</ins><span class="cx"> 
</span><del>-    // Treat the same as an array-index just with different strings and widths.
-    WebInspector.ObjectTreeBaseTreeElement.call(this, this._object, propertyPath);
</del><ins>+        this._object = object;
</ins><span class="cx"> 
</span><del>-    this.mainTitle = this._titleFragment();
-    this.addClassName(&quot;object-tree-array-index&quot;);
-};
</del><ins>+        this.mainTitle = this._titleFragment();
+        this.addClassName(&quot;object-tree-array-index&quot;);
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.ObjectTreeSetIndexTreeElement.prototype = {
-    constructor: WebInspector.ObjectTreeSetIndexTreeElement,
-    __proto__: WebInspector.ObjectTreeBaseTreeElement.prototype,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get object()
</span><span class="cx">     {
</span><span class="cx">         return this._object;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Protected
</span><span class="cx"> 
</span><span class="cx">     resolvedValue()
</span><span class="cx">     {
</span><span class="cx">         return this._object;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     resolvedValuePropertyPath()
</span><span class="cx">     {
</span><span class="cx">         return this.propertyPath.appendSetIndex(this._object);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -64,7 +64,7 @@
</span><span class="cx"> 
</span><span class="cx">     this._outlineElement = document.createElement(&quot;ol&quot;);
</span><span class="cx">     this._outlineElement.className = &quot;object-tree-outline&quot;;
</span><del>-    this._outline = new TreeOutline(this._outlineElement);
</del><ins>+    this._outline = new WebInspector.TreeOutline(this._outlineElement);
</ins><span class="cx">     this._element.appendChild(this._outlineElement);
</span><span class="cx"> 
</span><span class="cx">     // FIXME: Support editable ObjectTrees.
</span><span class="lines">@@ -233,7 +233,7 @@
</span><span class="cx"> 
</span><span class="cx">         if (!list) {
</span><span class="cx">             var errorMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString(&quot;Could not fetch properties. Object may no longer exist.&quot;));
</span><del>-            this._outline.appendChild(new TreeElement(errorMessageElement, null, false));
</del><ins>+            this._outline.appendChild(new WebInspector.TreeElement(errorMessageElement, null, false));
</ins><span class="cx">             return;
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="lines">@@ -252,7 +252,7 @@
</span><span class="cx"> 
</span><span class="cx">         if (!this._outline.children.length) {
</span><span class="cx">             var emptyMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString(&quot;No Entries.&quot;));
</span><del>-            this._outline.appendChild(new TreeElement(emptyMessageElement, null, false));
</del><ins>+            this._outline.appendChild(new WebInspector.TreeElement(emptyMessageElement, null, false));
</ins><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         // Show the prototype so users can see the API.
</span><span class="lines">@@ -284,7 +284,7 @@
</span><span class="cx"> 
</span><span class="cx">         if (!this._outline.children.length) {
</span><span class="cx">             var emptyMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString(&quot;No Properties.&quot;));
</span><del>-            this._outline.appendChild(new TreeElement(emptyMessageElement, null, false));
</del><ins>+            this._outline.appendChild(new WebInspector.TreeElement(emptyMessageElement, null, false));
</ins><span class="cx">         }
</span><span class="cx">     },
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsProfileNodeTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2014 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2014-2105 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,87 +23,85 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.ProfileNodeTreeElement = function(profileNode, delegate)
</del><ins>+WebInspector.ProfileNodeTreeElement = class ProfileNodeTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(profileNode);
</del><ins>+    constructor(profileNode, delegate)
+    {
+        console.assert(profileNode);
</ins><span class="cx"> 
</span><del>-    this._profileNode = profileNode;
-    this._delegate = delegate || null;
</del><ins>+        var title = profileNode.functionName;
+        var subtitle = &quot;&quot;;
</ins><span class="cx"> 
</span><del>-    var title = profileNode.functionName;
-    var subtitle = &quot;&quot;;
</del><ins>+        if (!title) {
+            switch (profileNode.type) {
+            case WebInspector.ProfileNode.Type.Function:
+                title = WebInspector.UIString(&quot;(anonymous function)&quot;);
+                break;
+            case WebInspector.ProfileNode.Type.Program:
+                title = WebInspector.UIString(&quot;(program)&quot;);
+                break;
+            default:
+                title = WebInspector.UIString(&quot;(anonymous function)&quot;);
+                console.error(&quot;Unknown ProfileNode type: &quot; + profileNode.type);
+            }
+        }
</ins><span class="cx"> 
</span><del>-    if (!title) {
</del><ins>+        var sourceCodeLocation = profileNode.sourceCodeLocation;
+        if (sourceCodeLocation) {
+            subtitle = document.createElement(&quot;span&quot;);
+            sourceCodeLocation.populateLiveDisplayLocationString(subtitle, &quot;textContent&quot;);
+        }
+
+        var className;
+
</ins><span class="cx">         switch (profileNode.type) {
</span><span class="cx">         case WebInspector.ProfileNode.Type.Function:
</span><del>-            title = WebInspector.UIString(&quot;(anonymous function)&quot;);
</del><ins>+            className = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
+            if (!sourceCodeLocation)
+                className = WebInspector.CallFrameTreeElement.NativeIconStyleClassName;
</ins><span class="cx">             break;
</span><span class="cx">         case WebInspector.ProfileNode.Type.Program:
</span><del>-            title = WebInspector.UIString(&quot;(program)&quot;);
</del><ins>+            className = WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass;
</ins><span class="cx">             break;
</span><del>-        default:
-            title = WebInspector.UIString(&quot;(anonymous function)&quot;);
-            console.error(&quot;Unknown ProfileNode type: &quot; + profileNode.type);
</del><span class="cx">         }
</span><del>-    }
</del><span class="cx"> 
</span><del>-    var sourceCodeLocation = this._profileNode.sourceCodeLocation;
-    if (sourceCodeLocation) {
-        subtitle = document.createElement(&quot;span&quot;);
-        sourceCodeLocation.populateLiveDisplayLocationString(subtitle, &quot;textContent&quot;);
-    }
</del><ins>+        console.assert(className);
</ins><span class="cx"> 
</span><del>-    var className;
</del><ins>+        // This is more than likely an event listener function with an &quot;on&quot; prefix and it is
+        // as long or longer than the shortest event listener name -- &quot;oncut&quot;.
+        if (profileNode.functionName &amp;&amp; profileNode.functionName.startsWith(&quot;on&quot;) &amp;&amp; profileNode.functionName.length &gt;= 5)
+            className = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
</ins><span class="cx"> 
</span><del>-    switch (this._profileNode.type) {
-    case WebInspector.ProfileNode.Type.Function:
-        className = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
-        if (!sourceCodeLocation)
-            className = WebInspector.CallFrameTreeElement.NativeIconStyleClassName;
-        break;
-    case WebInspector.ProfileNode.Type.Program:
-        className = WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass;
-        break;
-    }
</del><ins>+        var hasChildren = !!profileNode.childNodes.length;
</ins><span class="cx"> 
</span><del>-    console.assert(className);
</del><ins>+        super([className], title, subtitle, profileNode, hasChildren);
</ins><span class="cx"> 
</span><del>-    // This is more than likely an event listener function with an &quot;on&quot; prefix and it is
-    // as long or longer than the shortest event listener name -- &quot;oncut&quot;.
-    if (profileNode.functionName &amp;&amp; profileNode.functionName.startsWith(&quot;on&quot;) &amp;&amp; profileNode.functionName.length &gt;= 5)
-        className = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
</del><ins>+        this._profileNode = profileNode;
+        this._delegate = delegate || null;
</ins><span class="cx"> 
</span><del>-    var hasChildren = !!profileNode.childNodes.length;
</del><ins>+        this.small = true;
+        this.shouldRefreshChildren = true;
</ins><span class="cx"> 
</span><del>-    WebInspector.GeneralTreeElement.call(this, [className], title, subtitle, profileNode, hasChildren);
</del><ins>+        if (sourceCodeLocation)
+            this.tooltipHandledSeparately = true;
+    }
</ins><span class="cx"> 
</span><del>-    this.small = true;
-    this.shouldRefreshChildren = true;
-
-    if (sourceCodeLocation)
-        this.tooltipHandledSeparately = true;
-};
-
-WebInspector.ProfileNodeTreeElement.prototype = {
-    constructor: WebInspector.ProfileNodeTreeElement,
-    __proto__: WebInspector.GeneralTreeElement.prototype,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get profileNode()
</span><span class="cx">     {
</span><span class="cx">         return this._profileNode;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get filterableData()
</span><span class="cx">     {
</span><span class="cx">         var url = this._profileNode.sourceCodeLocation ? this._profileNode.sourceCodeLocation.sourceCode.url : &quot;&quot;;
</span><span class="cx">         return {text: [this.mainTitle, url || &quot;&quot;]};
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Protected
</span><span class="cx"> 
</span><del>-    onattach: function()
</del><ins>+    onattach()
</ins><span class="cx">     {
</span><span class="cx">         WebInspector.GeneralTreeElement.prototype.onattach.call(this);
</span><span class="cx"> 
</span><span class="lines">@@ -114,9 +112,9 @@
</span><span class="cx"> 
</span><span class="cx">         var tooltipPrefix = this.mainTitle + &quot;\n&quot;;
</span><span class="cx">         this._profileNode.sourceCodeLocation.populateLiveDisplayLocationTooltip(this.element, tooltipPrefix);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onpopulate: function()
</del><ins>+    onpopulate()
</ins><span class="cx">     {
</span><span class="cx">         if (!this.hasChildren || !this.shouldRefreshChildren)
</span><span class="cx">             return;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsPropertiesSectionjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/PropertiesSection.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/PropertiesSection.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/PropertiesSection.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -28,7 +28,7 @@
</span><span class="cx">     this.propertiesElement = document.createElement(&quot;ol&quot;);
</span><span class="cx">     this.propertiesElement.className = &quot;properties properties-tree&quot;;
</span><span class="cx">     this.propertiesElement.tabIndex = 0;
</span><del>-    this.propertiesTreeOutline = new TreeOutline(this.propertiesElement);
</del><ins>+    this.propertiesTreeOutline = new WebInspector.TreeOutline(this.propertiesElement);
</ins><span class="cx">     this.propertiesTreeOutline.section = this;
</span><span class="cx"> 
</span><span class="cx">     WebInspector.Section.call(this, title, subtitle);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResourceTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,81 +23,77 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.ResourceTreeElement = function(resource, representedObject)
</del><ins>+WebInspector.ResourceTreeElement = class ResourceTreeElement extends WebInspector.SourceCodeTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(resource instanceof WebInspector.Resource);
</del><ins>+    constructor(resource, representedObject)
+    {
+        console.assert(resource instanceof WebInspector.Resource);
</ins><span class="cx"> 
</span><del>-    WebInspector.SourceCodeTreeElement.call(this, resource, [WebInspector.ResourceTreeElement.StyleClassName, WebInspector.ResourceTreeElement.ResourceIconStyleClassName, resource.type], &quot;&quot;, &quot;&quot;, representedObject || resource, false);
</del><ins>+        super(resource, [&quot;resource&quot;, WebInspector.ResourceTreeElement.ResourceIconStyleClassName, resource.type], &quot;&quot;, &quot;&quot;, representedObject || resource, false);
</ins><span class="cx"> 
</span><del>-    this._updateResource(resource);
-};
</del><ins>+        this._updateResource(resource);
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.ResourceTreeElement.StyleClassName = &quot;resource&quot;;
-WebInspector.ResourceTreeElement.ResourceIconStyleClassName = &quot;resource-icon&quot;;
-WebInspector.ResourceTreeElement.FailedStyleClassName = &quot;failed&quot;;
</del><ins>+    // Static
</ins><span class="cx"> 
</span><del>-WebInspector.ResourceTreeElement.compareResourceTreeElements = function(a, b)
-{
-    // Compare by type first to keep resources grouped by type when not sorted into folders.
-    var comparisonResult = a.resource.type.localeCompare(b.resource.type);
-    if (comparisonResult !== 0)
-        return comparisonResult;
</del><ins>+    static compareResourceTreeElements(a, b)
+    {
+        // Compare by type first to keep resources grouped by type when not sorted into folders.
+        var comparisonResult = a.resource.type.localeCompare(b.resource.type);
+        if (comparisonResult !== 0)
+            return comparisonResult;
</ins><span class="cx"> 
</span><del>-    // Compare async resource types by their first timestamp so they are in chronological order.
-    if (a.resource.type === WebInspector.Resource.Type.XHR || a.resource.type === WebInspector.Resource.Type.WebSocket)
-        return a.resource.firstTimestamp - b.resource.firstTimestamp || 0;
</del><ins>+        // Compare async resource types by their first timestamp so they are in chronological order.
+        if (a.resource.type === WebInspector.Resource.Type.XHR || a.resource.type === WebInspector.Resource.Type.WebSocket)
+            return a.resource.firstTimestamp - b.resource.firstTimestamp || 0;
</ins><span class="cx"> 
</span><del>-    // Compare by subtitle when the types are the same. The subtitle is used to show the
-    // domain of the resource. This causes resources to group by domain. If the resource
-    // is on the same domain as the frame it will have an empty subtitle. This is good
-    // because empty string sorts first, so those will appear before external resources.
-    comparisonResult = a.subtitle.localeCompare(b.subtitle);
-    if (comparisonResult !== 0)
-        return comparisonResult;
</del><ins>+        // Compare by subtitle when the types are the same. The subtitle is used to show the
+        // domain of the resource. This causes resources to group by domain. If the resource
+        // is on the same domain as the frame it will have an empty subtitle. This is good
+        // because empty string sorts first, so those will appear before external resources.
+        comparisonResult = a.subtitle.localeCompare(b.subtitle);
+        if (comparisonResult !== 0)
+            return comparisonResult;
</ins><span class="cx"> 
</span><del>-    // Compare by title when the subtitles are the same.
-    return a.mainTitle.localeCompare(b.mainTitle);
-};
-
-WebInspector.ResourceTreeElement.compareFolderAndResourceTreeElements = function(a, b)
-{
-    var aIsFolder = a instanceof WebInspector.FolderTreeElement;
-    var bIsFolder = b instanceof WebInspector.FolderTreeElement;
-
-    if (aIsFolder &amp;&amp; !bIsFolder)
-        return -1;
-    if (!aIsFolder &amp;&amp; bIsFolder)
-        return 1;
-    if (aIsFolder &amp;&amp; bIsFolder)
</del><ins>+        // Compare by title when the subtitles are the same.
</ins><span class="cx">         return a.mainTitle.localeCompare(b.mainTitle);
</span><ins>+    }
</ins><span class="cx"> 
</span><del>-    return WebInspector.ResourceTreeElement.compareResourceTreeElements(a, b);
-};
</del><ins>+    static compareFolderAndResourceTreeElements(a, b)
+    {
+        var aIsFolder = a instanceof WebInspector.FolderTreeElement;
+        var bIsFolder = b instanceof WebInspector.FolderTreeElement;
</ins><span class="cx"> 
</span><del>-WebInspector.ResourceTreeElement.prototype = {
-    constructor: WebInspector.ResourceTreeElement,
-    __proto__: WebInspector.SourceCodeTreeElement.prototype,
</del><ins>+        if (aIsFolder &amp;&amp; !bIsFolder)
+            return -1;
+        if (!aIsFolder &amp;&amp; bIsFolder)
+            return 1;
+        if (aIsFolder &amp;&amp; bIsFolder)
+            return a.mainTitle.localeCompare(b.mainTitle);
</ins><span class="cx"> 
</span><ins>+        return WebInspector.ResourceTreeElement.compareResourceTreeElements(a, b);
+    }
+
</ins><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get resource()
</span><span class="cx">     {
</span><span class="cx">         return this._resource;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get filterableData()
</span><span class="cx">     {
</span><span class="cx">         return {text: this._resource.url};
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    ondblclick: function()
</del><ins>+    ondblclick()
</ins><span class="cx">     {
</span><span class="cx">         InspectorFrontendHost.openInNewTab(this._resource.url);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Protected (Used by FrameTreeElement)
</span><span class="cx"> 
</span><del>-    _updateResource: function(resource)
</del><ins>+    _updateResource(resource)
</ins><span class="cx">     {
</span><span class="cx">         console.assert(resource instanceof WebInspector.Resource);
</span><span class="cx"> 
</span><span class="lines">@@ -125,11 +121,11 @@
</span><span class="cx">         this._updateTitles();
</span><span class="cx">         this._updateStatus();
</span><span class="cx">         this._updateToolTip();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Protected
</span><span class="cx"> 
</span><del>-    _updateTitles: function()
</del><ins>+    _updateTitles()
</ins><span class="cx">     {
</span><span class="cx">         var frame = this._resource.parentFrame;
</span><span class="cx">         var isMainResource = this._resource.isMainResource();
</span><span class="lines">@@ -152,11 +148,11 @@
</span><span class="cx"> 
</span><span class="cx">         if (oldMainTitle !== this.mainTitle)
</span><span class="cx">             this.callFirstAncestorFunction(&quot;descendantResourceTreeElementMainTitleDidChange&quot;, [this, oldMainTitle]);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span><del>-    _updateStatus: function()
</del><ins>+    _updateStatus()
</ins><span class="cx">     {
</span><span class="cx">         if (this._resource.failed)
</span><span class="cx">             this.addClassName(WebInspector.ResourceTreeElement.FailedStyleClassName);
</span><span class="lines">@@ -174,20 +170,20 @@
</span><span class="cx">             var spinner = new WebInspector.IndeterminateProgressSpinner;
</span><span class="cx">             this.status = spinner.element;
</span><span class="cx">         }
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _updateToolTip: function()
</del><ins>+    _updateToolTip()
</ins><span class="cx">     {
</span><span class="cx">         this.tooltip = this._resource.url;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _urlDidChange: function(event)
</del><ins>+    _urlDidChange(event)
</ins><span class="cx">     {
</span><span class="cx">         this._updateTitles();
</span><span class="cx">         this._updateToolTip();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _typeDidChange: function(event)
</del><ins>+    _typeDidChange(event)
</ins><span class="cx">     {
</span><span class="cx">         this.removeClassName(event.data.oldType);
</span><span class="cx">         this.addClassName(this._resource.type);
</span><span class="lines">@@ -195,3 +191,6 @@
</span><span class="cx">         this.callFirstAncestorFunction(&quot;descendantResourceTreeElementTypeDidChange&quot;, [this, event.data.oldType]);
</span><span class="cx">     }
</span><span class="cx"> };
</span><ins>+
+WebInspector.ResourceTreeElement.ResourceIconStyleClassName = &quot;resource-icon&quot;;
+WebInspector.ResourceTreeElement.FailedStyleClassName = &quot;failed&quot;;
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScriptTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,35 +23,31 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.ScriptTreeElement = function(script)
</del><ins>+WebInspector.ScriptTreeElement = class ScriptTreeElement extends WebInspector.SourceCodeTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(script instanceof WebInspector.Script);
</del><ins>+    constructor(script)
+    {
+        console.assert(script instanceof WebInspector.Script);
</ins><span class="cx"> 
</span><del>-    WebInspector.SourceCodeTreeElement.call(this, script, WebInspector.ScriptTreeElement.StyleClassName, null, null, script, false);
</del><ins>+        super(script, &quot;script&quot;, null, null, script, false);
</ins><span class="cx"> 
</span><del>-    this.mainTitle = script.displayName;
</del><ins>+        this.mainTitle = script.displayName;
</ins><span class="cx"> 
</span><del>-    if (script.url) {
-        // Show the host as the subtitle if it is different from the main title.
-        var subtitle = WebInspector.displayNameForHost(script.urlComponents.host);
-        this.subtitle = this.mainTitle !== subtitle ? subtitle : null;
</del><ins>+        if (script.url) {
+            // Show the host as the subtitle if it is different from the main title.
+            var subtitle = WebInspector.displayNameForHost(script.urlComponents.host);
+            this.subtitle = this.mainTitle !== subtitle ? subtitle : null;
</ins><span class="cx"> 
</span><del>-        this.tooltip = script.url;
</del><ins>+            this.tooltip = script.url;
</ins><span class="cx"> 
</span><del>-        this.addClassName(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
-        this.addClassName(WebInspector.Resource.Type.Script);
-    } else
-        this.addClassName(WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName);
</del><ins>+            this.addClassName(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
+            this.addClassName(WebInspector.Resource.Type.Script);
+        } else
+            this.addClassName(WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName);
</ins><span class="cx"> 
</span><del>-    this._script = script;
-};
</del><ins>+        this._script = script;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName = &quot;anonymous-script-icon&quot;;
-WebInspector.ScriptTreeElement.StyleClassName = &quot;script&quot;;
-
-WebInspector.ScriptTreeElement.prototype = {
-    constructor: WebInspector.ScriptTreeElement,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get script()
</span><span class="lines">@@ -60,4 +56,4 @@
</span><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span><del>-WebInspector.ScriptTreeElement.prototype.__proto__ = WebInspector.SourceCodeTreeElement.prototype;
</del><ins>+WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName = &quot;anonymous-script-icon&quot;;
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSearchResultTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,67 +23,66 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.SearchResultTreeElement = function(representedObject)
</del><ins>+WebInspector.SearchResultTreeElement = class SearchResultTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(representedObject instanceof WebInspector.DOMSearchMatchObject || representedObject instanceof WebInspector.SourceCodeSearchMatchObject);
</del><ins>+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.DOMSearchMatchObject || representedObject instanceof WebInspector.SourceCodeSearchMatchObject);
</ins><span class="cx"> 
</span><del>-    var title = WebInspector.SearchResultTreeElement.truncateAndHighlightTitle(representedObject.title, representedObject.searchTerm, representedObject.sourceCodeTextRange);
</del><ins>+        var title = WebInspector.SearchResultTreeElement.truncateAndHighlightTitle(representedObject.title, representedObject.searchTerm, representedObject.sourceCodeTextRange);
</ins><span class="cx"> 
</span><del>-    WebInspector.GeneralTreeElement.call(this, representedObject.className, title, null, representedObject, false);
-    this.small = true;
-};
</del><ins>+        super(representedObject.className, title, null, representedObject, false);
</ins><span class="cx"> 
</span><del>-WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch = 15;
-WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch = 50;
-WebInspector.SearchResultTreeElement.HighlightedStyleClassName = &quot;highlighted&quot;;
</del><ins>+        this.small = true;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.SearchResultTreeElement.prototype = {
-    constructor: WebInspector.SearchResultTreeElement,
</del><ins>+    // Static
</ins><span class="cx"> 
</span><del>-    // Public
-
-    get filterableData()
</del><ins>+    static truncateAndHighlightTitle(title, searchTerm, sourceCodeTextRange)
</ins><span class="cx">     {
</span><del>-        return {text: this.representedObject.title};
-    }
-};
</del><ins>+        // Use the original location, since those line/column offsets match the line text in title.
+        var textRange = sourceCodeTextRange.textRange;
</ins><span class="cx"> 
</span><del>-WebInspector.SearchResultTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
</del><ins>+        var searchTermIndex = textRange.startColumn;
</ins><span class="cx"> 
</span><del>-WebInspector.SearchResultTreeElement.truncateAndHighlightTitle = function(title, searchTerm, sourceCodeTextRange)
-{
-    // Use the original location, since those line/column offsets match the line text in title.
-    var textRange = sourceCodeTextRange.textRange;
</del><ins>+        // We should only have one line text ranges, so make sure that is the case.
+        console.assert(textRange.startLine === textRange.endLine);
</ins><span class="cx"> 
</span><del>-    var searchTermIndex = textRange.startColumn;
</del><ins>+        // Show some characters before the matching text (if there are enough) for context. TreeOutline takes care of the truncating
+        // at the end of the string.
+        var modifiedTitle = null;
+        if (searchTermIndex &gt; WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch) {
+            modifiedTitle = &quot;\u2026&quot; + title.substring(searchTermIndex - WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch);
+            searchTermIndex = WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch + 1;
+        } else
+            modifiedTitle = title;
</ins><span class="cx"> 
</span><del>-    // We should only have one line text ranges, so make sure that is the case.
-    console.assert(textRange.startLine === textRange.endLine);
</del><ins>+        // Truncate the tail of the title so the tooltip isn't so large.
+        modifiedTitle = modifiedTitle.trimEnd(searchTermIndex + searchTerm.length + WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch);
</ins><span class="cx"> 
</span><del>-    // Show some characters before the matching text (if there are enough) for context. TreeOutline takes care of the truncating
-    // at the end of the string.
-    var modifiedTitle = null;
-    if (searchTermIndex &gt; WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch) {
-        modifiedTitle = &quot;\u2026&quot; + title.substring(searchTermIndex - WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch);
-        searchTermIndex = WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch + 1;
-    } else
-        modifiedTitle = title;
</del><ins>+        console.assert(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length).toLowerCase() === searchTerm.toLowerCase());
</ins><span class="cx"> 
</span><del>-    // Truncate the tail of the title so the tooltip isn't so large.
-    modifiedTitle = modifiedTitle.trimEnd(searchTermIndex + searchTerm.length + WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch);
</del><ins>+        var highlightedTitle = document.createDocumentFragment();
</ins><span class="cx"> 
</span><del>-    console.assert(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length).toLowerCase() === searchTerm.toLowerCase());
</del><ins>+        highlightedTitle.appendChild(document.createTextNode(modifiedTitle.substring(0, searchTermIndex)));
</ins><span class="cx"> 
</span><del>-    var highlightedTitle = document.createDocumentFragment();
</del><ins>+        var highlightSpan = document.createElement(&quot;span&quot;);
+        highlightSpan.className = &quot;highlighted&quot;;
+        highlightSpan.appendChild(document.createTextNode(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length)));
+        highlightedTitle.appendChild(highlightSpan);
</ins><span class="cx"> 
</span><del>-    highlightedTitle.appendChild(document.createTextNode(modifiedTitle.substring(0, searchTermIndex)));
</del><ins>+        highlightedTitle.appendChild(document.createTextNode(modifiedTitle.substring(searchTermIndex + searchTerm.length)));
</ins><span class="cx"> 
</span><del>-    var highlightSpan = document.createElement(&quot;span&quot;);
-    highlightSpan.className = WebInspector.SearchResultTreeElement.HighlightedStyleClassName;
-    highlightSpan.appendChild(document.createTextNode(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length)));
-    highlightedTitle.appendChild(highlightSpan);
</del><ins>+        return highlightedTitle;
+    }
</ins><span class="cx"> 
</span><del>-    highlightedTitle.appendChild(document.createTextNode(modifiedTitle.substring(searchTermIndex + searchTerm.length)));
</del><ins>+    // Public
</ins><span class="cx"> 
</span><del>-    return highlightedTitle;
</del><ins>+    get filterableData()
+    {
+        return {text: this.representedObject.title};
+    }
</ins><span class="cx"> };
</span><ins>+
+WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch = 15;
+WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch = 50;
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSourceCodeTimelineTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,24 +23,25 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.SourceCodeTimelineTreeElement = function(sourceCodeTimeline, subtitleNameStyle, includeTimerIdentifierInMainTitle)
</del><ins>+WebInspector.SourceCodeTimelineTreeElement = class SourceCodeTimelineTreeElement extends WebInspector.TimelineRecordTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(sourceCodeTimeline);
</del><ins>+    constructor(sourceCodeTimeline, subtitleNameStyle, includeTimerIdentifierInMainTitle)
+    {
+        console.assert(sourceCodeTimeline);
</ins><span class="cx"> 
</span><del>-    this._sourceCodeTimeline = sourceCodeTimeline;
</del><ins>+        subtitleNameStyle = subtitleNameStyle || WebInspector.SourceCodeLocation.NameStyle.None;
</ins><span class="cx"> 
</span><del>-    subtitleNameStyle = subtitleNameStyle || WebInspector.SourceCodeLocation.NameStyle.None;
</del><ins>+        super(sourceCodeTimeline.records[0], subtitleNameStyle, includeTimerIdentifierInMainTitle, sourceCodeTimeline.sourceCodeLocation, sourceCodeTimeline);
</ins><span class="cx"> 
</span><del>-    WebInspector.TimelineRecordTreeElement.call(this, sourceCodeTimeline.records[0], subtitleNameStyle, includeTimerIdentifierInMainTitle, sourceCodeTimeline.sourceCodeLocation, sourceCodeTimeline);
-};
</del><ins>+        this._sourceCodeTimeline = sourceCodeTimeline;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.SourceCodeTimelineTreeElement.prototype = {
-    constructor: WebInspector.SourceCodeTimelineTreeElement,
-    __proto__: WebInspector.TimelineRecordTreeElement.prototype,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><del>-    record: undefined,
</del><ins>+    get record()
+    {
+        return undefined;
+    }
</ins><span class="cx"> 
</span><span class="cx">     get sourceCodeTimeline()
</span><span class="cx">     {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSourceCodeTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,24 +23,22 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.SourceCodeTreeElement = function(sourceCode, classNames, title, subtitle, representedObject, hasChildren)
</del><ins>+WebInspector.SourceCodeTreeElement = class SourceCodeTreeElement extends WebInspector.FolderizedTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(sourceCode instanceof WebInspector.SourceCode);
</del><ins>+    constructor(sourceCode, classNames, title, subtitle, representedObject, hasChildren)
+    {
+        console.assert(sourceCode instanceof WebInspector.SourceCode);
</ins><span class="cx"> 
</span><del>-    WebInspector.FolderizedTreeElement.call(this, classNames, title, subtitle, representedObject || sourceCode, hasChildren);
</del><ins>+        super(classNames, title, subtitle, representedObject || sourceCode, hasChildren);
</ins><span class="cx"> 
</span><del>-    this.small = true;
</del><ins>+        this.small = true;
</ins><span class="cx"> 
</span><del>-    this._updateSourceCode(sourceCode);
-};
</del><ins>+        this._updateSourceCode(sourceCode);
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.SourceCodeTreeElement.prototype = {
-    constructor: WebInspector.SourceCodeTreeElement,
-    __proto__: WebInspector.FolderizedTreeElement.prototype,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><del>-    updateSourceMapResources: function()
</del><ins>+    updateSourceMapResources()
</ins><span class="cx">     {
</span><span class="cx">         if (!this.treeOutline || !this.treeOutline.includeSourceMapResourceChildren)
</span><span class="cx">             return;
</span><span class="lines">@@ -50,18 +48,18 @@
</span><span class="cx"> 
</span><span class="cx">         if (!this.hasChildren)
</span><span class="cx">             this.removeChildren();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Overrides from TreeElement
</span><span class="cx"> 
</span><del>-    onattach: function()
</del><ins>+    onattach()
</ins><span class="cx">     {
</span><span class="cx">         WebInspector.GeneralTreeElement.prototype.onattach.call(this);
</span><span class="cx"> 
</span><span class="cx">         this.updateSourceMapResources();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    onpopulate: function()
</del><ins>+    onpopulate()
</ins><span class="cx">     {
</span><span class="cx">         if (!this.treeOutline || !this.treeOutline.includeSourceMapResourceChildren)
</span><span class="cx">             return;
</span><span class="lines">@@ -130,11 +128,11 @@
</span><span class="cx"> 
</span><span class="cx">         for (var i = 0; i &lt; this.children.length; ++i)
</span><span class="cx">             findAndCombineFolderChains(this.children[i], null);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Protected
</span><span class="cx"> 
</span><del>-    createFoldersAsNeededForSubpath: function(subpath)
</del><ins>+    createFoldersAsNeededForSubpath(subpath)
</ins><span class="cx">     {
</span><span class="cx">         if (!subpath)
</span><span class="cx">             return this;
</span><span class="lines">@@ -169,9 +167,9 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         return currentFolderTreeElement;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    descendantResourceTreeElementTypeDidChange: function(childTreeElement, oldType)
</del><ins>+    descendantResourceTreeElementTypeDidChange(childTreeElement, oldType)
</ins><span class="cx">     {
</span><span class="cx">         // Called by descendant SourceMapResourceTreeElements.
</span><span class="cx"> 
</span><span class="lines">@@ -185,11 +183,11 @@
</span><span class="cx"> 
</span><span class="cx">         if (wasSelected)
</span><span class="cx">             childTreeElement.revealAndSelect(true, false, true, true);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Protected (ResourceTreeElement calls this when its Resource changes dynamically for Frames)
</span><span class="cx"> 
</span><del>-    _updateSourceCode: function(sourceCode)
</del><ins>+    _updateSourceCode(sourceCode)
</ins><span class="cx">     {
</span><span class="cx">         console.assert(sourceCode instanceof WebInspector.SourceCode);
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSourceMapResourceTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourceMapResourceTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SourceMapResourceTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourceMapResourceTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,25 +23,22 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.SourceMapResourceTreeElement = function(sourceMapResource, representedObject)
</del><ins>+WebInspector.SourceMapResourceTreeElement = class SourceMapResourceTreeElement extends WebInspector.ResourceTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(sourceMapResource instanceof WebInspector.SourceMapResource);
</del><ins>+    constructor(sourceMapResource, representedObject)
+    {
+        console.assert(sourceMapResource instanceof WebInspector.SourceMapResource);
</ins><span class="cx"> 
</span><del>-    WebInspector.ResourceTreeElement.call(this, sourceMapResource);
</del><ins>+        super(sourceMapResource);
</ins><span class="cx"> 
</span><del>-    console.assert(this.resource === sourceMapResource);
</del><ins>+        console.assert(this.resource === sourceMapResource);
</ins><span class="cx"> 
</span><del>-    this.addClassName(WebInspector.SourceMapResourceTreeElement.StyleClassName);
-};
</del><ins>+        this.addClassName(&quot;source-map-resource&quot;);
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.SourceMapResourceTreeElement.StyleClassName = &quot;source-map-resource&quot;;
-
-WebInspector.SourceMapResourceTreeElement.prototype = {
-    constructor: WebInspector.SourceMapResourceTreeElement,
-
</del><span class="cx">     // Protected
</span><span class="cx"> 
</span><del>-    _updateTitles: function()
</del><ins>+    _updateTitles()
</ins><span class="cx">     {
</span><span class="cx">         var oldMainTitle = this.mainTitle;
</span><span class="cx">         this.mainTitle = this.resource.displayName;
</span><span class="lines">@@ -56,5 +53,3 @@
</span><span class="cx">             this.callFirstAncestorFunction(&quot;descendantResourceTreeElementMainTitleDidChange&quot;, [this, oldMainTitle]);
</span><span class="cx">     }
</span><span class="cx"> };
</span><del>-
-WebInspector.SourceMapResourceTreeElement.prototype.__proto__ = WebInspector.ResourceTreeElement.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsStorageTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,23 +23,22 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.StorageTreeElement = function(classNames, title, representedObject)
</del><ins>+WebInspector.StorageTreeElement = class StorageTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    WebInspector.GeneralTreeElement.call(this, classNames, title, null, representedObject, false);
</del><ins>+    constructor(classNames, title, representedObject)
+    {
+        super(classNames, title, null, representedObject, false);
</ins><span class="cx"> 
</span><del>-    this.small = true;
-    this.flattened = false;
-};
</del><ins>+        this.small = true;
+        this.flattened = false;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.StorageTreeElement.prototype = {
-    constructor: WebInspector.StorageTreeElement,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get flattened()
</span><span class="cx">     {
</span><span class="cx">         return this._flattened;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set flattened(flattened)
</span><span class="cx">     {
</span><span class="lines">@@ -57,11 +56,11 @@
</span><span class="cx">         this.mainTitle = this.categoryName;
</span><span class="cx">         this.subtitle = this.name;
</span><span class="cx">         this._updateChildrenTitles();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span><del>-    _updateChildrenTitles: function()
</del><ins>+    _updateChildrenTitles()
</ins><span class="cx">     {
</span><span class="cx">         for (var i = 0; i &lt; this.children.length; ++i) {
</span><span class="cx">             if (typeof this.children[i].updateTitles === &quot;function&quot;)
</span><span class="lines">@@ -69,5 +68,3 @@
</span><span class="cx">         }
</span><span class="cx">     }
</span><span class="cx"> };
</span><del>-
-WebInspector.StorageTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -461,7 +461,7 @@
</span><span class="cx">         if (!this._popoverCallStackTreeOutline) {
</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><del>-            this._popoverCallStackTreeOutline = new TreeOutline(contentElement);
</del><ins>+            this._popoverCallStackTreeOutline = new WebInspector.TreeOutline(contentElement);
</ins><span class="cx">             this._popoverCallStackTreeOutline.onselect = this._popoverCallStackTreeElementSelected.bind(this);
</span><span class="cx">         } else
</span><span class="cx">             this._popoverCallStackTreeOutline.removeChildren();
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2014 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,130 +23,119 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.TimelineRecordTreeElement = function(timelineRecord, subtitleNameStyle, includeTimerIdentifierInMainTitle, sourceCodeLocation, representedObject)
</del><ins>+WebInspector.TimelineRecordTreeElement = class TimelineRecordTreeElement extends WebInspector.GeneralTreeElement
</ins><span class="cx"> {
</span><del>-    console.assert(timelineRecord);
</del><ins>+    constructor(timelineRecord, subtitleNameStyle, includeTimerIdentifierInMainTitle, sourceCodeLocation, representedObject)
+    {
+        console.assert(timelineRecord);
</ins><span class="cx"> 
</span><del>-    this._record = timelineRecord;
-    this._sourceCodeLocation = sourceCodeLocation || timelineRecord.sourceCodeLocation || null;
</del><ins>+        sourceCodeLocation = sourceCodeLocation || timelineRecord.sourceCodeLocation || null;
</ins><span class="cx"> 
</span><del>-    var title = &quot;&quot;;
-    var subtitle = &quot;&quot;;
</del><ins>+        var title = &quot;&quot;;
+        var subtitle = &quot;&quot;;
</ins><span class="cx"> 
</span><del>-    if (this._sourceCodeLocation) {
-        subtitle = document.createElement(&quot;span&quot;);
</del><ins>+        if (sourceCodeLocation) {
+            subtitle = document.createElement(&quot;span&quot;);
</ins><span class="cx"> 
</span><del>-        if (subtitleNameStyle !== WebInspector.SourceCodeLocation.NameStyle.None)
-            this._sourceCodeLocation.populateLiveDisplayLocationString(subtitle, &quot;textContent&quot;, null, subtitleNameStyle);
-        else
-            this._sourceCodeLocation.populateLiveDisplayLocationString(subtitle, &quot;textContent&quot;, null, WebInspector.SourceCodeLocation.NameStyle.None, WebInspector.UIString(&quot;line &quot;));
-    }
</del><ins>+            if (subtitleNameStyle !== WebInspector.SourceCodeLocation.NameStyle.None)
+                sourceCodeLocation.populateLiveDisplayLocationString(subtitle, &quot;textContent&quot;, null, subtitleNameStyle);
+            else
+                sourceCodeLocation.populateLiveDisplayLocationString(subtitle, &quot;textContent&quot;, null, WebInspector.SourceCodeLocation.NameStyle.None, WebInspector.UIString(&quot;line &quot;));
+        }
</ins><span class="cx"> 
</span><del>-    var iconStyleClass = null;
</del><ins>+        var iconStyleClass = null;
</ins><span class="cx"> 
</span><del>-    switch (timelineRecord.type) {
-    case WebInspector.TimelineRecord.Type.Layout:
-        title = WebInspector.LayoutTimelineRecord.displayNameForEventType(timelineRecord.eventType);
</del><ins>+        switch (timelineRecord.type) {
+        case WebInspector.TimelineRecord.Type.Layout:
+            title = WebInspector.LayoutTimelineRecord.displayNameForEventType(timelineRecord.eventType);
</ins><span class="cx"> 
</span><del>-        switch (timelineRecord.eventType) {
-        case WebInspector.LayoutTimelineRecord.EventType.InvalidateStyles:
-        case WebInspector.LayoutTimelineRecord.EventType.RecalculateStyles:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.StyleRecordIconStyleClass;
</del><ins>+            switch (timelineRecord.eventType) {
+            case WebInspector.LayoutTimelineRecord.EventType.InvalidateStyles:
+            case WebInspector.LayoutTimelineRecord.EventType.RecalculateStyles:
+                iconStyleClass = WebInspector.TimelineRecordTreeElement.StyleRecordIconStyleClass;
+                break;
+            case WebInspector.LayoutTimelineRecord.EventType.InvalidateLayout:
+            case WebInspector.LayoutTimelineRecord.EventType.ForcedLayout:
+            case WebInspector.LayoutTimelineRecord.EventType.Layout:
+                iconStyleClass = WebInspector.TimelineRecordTreeElement.LayoutRecordIconStyleClass;
+                break;
+            case WebInspector.LayoutTimelineRecord.EventType.Paint:
+                iconStyleClass = WebInspector.TimelineRecordTreeElement.PaintRecordIconStyleClass;
+                break;
+            default:
+                console.error(&quot;Unknown LayoutTimelineRecord eventType: &quot; + timelineRecord.eventType, timelineRecord);
+            }
+
</ins><span class="cx">             break;
</span><del>-        case WebInspector.LayoutTimelineRecord.EventType.InvalidateLayout:
-        case WebInspector.LayoutTimelineRecord.EventType.ForcedLayout:
-        case WebInspector.LayoutTimelineRecord.EventType.Layout:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.LayoutRecordIconStyleClass;
-            break;
-        case WebInspector.LayoutTimelineRecord.EventType.Paint:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.PaintRecordIconStyleClass;
-            break;
-        default:
-            console.error(&quot;Unknown LayoutTimelineRecord eventType: &quot; + timelineRecord.eventType, timelineRecord);
-        }
</del><span class="cx"> 
</span><del>-        break;
</del><ins>+        case WebInspector.TimelineRecord.Type.Script:
+            title = WebInspector.ScriptTimelineRecord.EventType.displayName(timelineRecord.eventType, timelineRecord.details, includeTimerIdentifierInMainTitle);
</ins><span class="cx"> 
</span><del>-    case WebInspector.TimelineRecord.Type.Script:
-        title = WebInspector.ScriptTimelineRecord.EventType.displayName(timelineRecord.eventType, timelineRecord.details, includeTimerIdentifierInMainTitle);
</del><ins>+            switch (timelineRecord.eventType) {
+            case WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated:
+                iconStyleClass = WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass;
+                break;
+            case WebInspector.ScriptTimelineRecord.EventType.EventDispatched:
+                iconStyleClass = WebInspector.TimelineRecordTreeElement.EventRecordIconStyleClass;
+                break;
+            case WebInspector.ScriptTimelineRecord.EventType.ProbeSampleRecorded:
+                iconStyleClass = WebInspector.TimelineRecordTreeElement.ProbeRecordIconStyleClass;
+                break;
+            case WebInspector.ScriptTimelineRecord.EventType.ConsoleProfileRecorded:
+                iconStyleClass = WebInspector.TimelineRecordTreeElement.ConsoleProfileIconStyleClass;
+                break;
+            case WebInspector.ScriptTimelineRecord.EventType.TimerFired:
+            case WebInspector.ScriptTimelineRecord.EventType.TimerInstalled:
+            case WebInspector.ScriptTimelineRecord.EventType.TimerRemoved:
+                iconStyleClass = WebInspector.TimelineRecordTreeElement.TimerRecordIconStyleClass;
+                break;
+            case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired:
+            case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameRequested:
+            case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameCanceled:
+                iconStyleClass = WebInspector.TimelineRecordTreeElement.AnimationRecordIconStyleClass;
+                break;
+            default:
+                console.error(&quot;Unknown ScriptTimelineRecord eventType: &quot; + timelineRecord.eventType, timelineRecord);
+            }
</ins><span class="cx"> 
</span><del>-        switch (timelineRecord.eventType) {
-        case WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass;
</del><span class="cx">             break;
</span><del>-        case WebInspector.ScriptTimelineRecord.EventType.EventDispatched:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.EventRecordIconStyleClass;
</del><ins>+
+        case WebInspector.TimelineRecord.Type.RunLoop:
+            title = WebInspector.UIString(&quot;Runloop Executed&quot;);
+            iconStyleClass = WebInspector.TimelineRecordTreeElement.RunLoopRecordIconStyleClass;
</ins><span class="cx">             break;
</span><del>-        case WebInspector.ScriptTimelineRecord.EventType.ProbeSampleRecorded:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.ProbeRecordIconStyleClass;
-            break;
-        case WebInspector.ScriptTimelineRecord.EventType.ConsoleProfileRecorded:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.ConsoleProfileIconStyleClass;
-            break;
-        case WebInspector.ScriptTimelineRecord.EventType.TimerFired:
-        case WebInspector.ScriptTimelineRecord.EventType.TimerInstalled:
-        case WebInspector.ScriptTimelineRecord.EventType.TimerRemoved:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.TimerRecordIconStyleClass;
-            break;
-        case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired:
-        case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameRequested:
-        case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameCanceled:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.AnimationRecordIconStyleClass;
-            break;
</del><ins>+
</ins><span class="cx">         default:
</span><del>-            console.error(&quot;Unknown ScriptTimelineRecord eventType: &quot; + timelineRecord.eventType, timelineRecord);
</del><ins>+            console.error(&quot;Unknown TimelineRecord type: &quot; + timelineRecord.type, timelineRecord);
</ins><span class="cx">         }
</span><span class="cx"> 
</span><del>-        break;
</del><ins>+        super([iconStyleClass], title, subtitle, representedObject || timelineRecord, false);
</ins><span class="cx"> 
</span><del>-    case WebInspector.TimelineRecord.Type.RunLoop:
-        title = WebInspector.UIString(&quot;Runloop Executed&quot;);
-        iconStyleClass = WebInspector.TimelineRecordTreeElement.RunLoopRecordIconStyleClass;
-        break;
</del><ins>+        this._record = timelineRecord;
+        this._sourceCodeLocation = sourceCodeLocation;
</ins><span class="cx"> 
</span><del>-    default:
-        console.error(&quot;Unknown TimelineRecord type: &quot; + timelineRecord.type, timelineRecord);
</del><ins>+        this.small = true;
+
+        if (this._sourceCodeLocation)
+            this.tooltipHandledSeparately = true;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    WebInspector.GeneralTreeElement.call(this, [iconStyleClass], title, subtitle, representedObject || timelineRecord, false);
-
-    this.small = true;
-
-    if (this._sourceCodeLocation)
-        this.tooltipHandledSeparately = true;
-};
-
-WebInspector.TimelineRecordTreeElement.StyleRecordIconStyleClass = &quot;style-record&quot;;
-WebInspector.TimelineRecordTreeElement.LayoutRecordIconStyleClass = &quot;layout-record&quot;;
-WebInspector.TimelineRecordTreeElement.PaintRecordIconStyleClass = &quot;paint-record&quot;;
-WebInspector.TimelineRecordTreeElement.RunLoopRecordIconStyleClass = &quot;runloop-record&quot;;
-WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass = &quot;evaluated-record&quot;;
-WebInspector.TimelineRecordTreeElement.EventRecordIconStyleClass = &quot;event-record&quot;;
-WebInspector.TimelineRecordTreeElement.TimerRecordIconStyleClass = &quot;timer-record&quot;;
-WebInspector.TimelineRecordTreeElement.AnimationRecordIconStyleClass = &quot;animation-record&quot;;
-WebInspector.TimelineRecordTreeElement.ProbeRecordIconStyleClass = &quot;probe-record&quot;;
-WebInspector.TimelineRecordTreeElement.ConsoleProfileIconStyleClass = &quot;console-profile-record&quot;;
-
-WebInspector.TimelineRecordTreeElement.prototype = {
-    constructor: WebInspector.TimelineRecordTreeElement,
-    __proto__: WebInspector.GeneralTreeElement.prototype,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get record()
</span><span class="cx">     {
</span><span class="cx">         return this._record;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get filterableData()
</span><span class="cx">     {
</span><span class="cx">         var url = this._sourceCodeLocation ? this._sourceCodeLocation.sourceCode.url : &quot;&quot;;
</span><span class="cx">         return {text: [this.mainTitle, url || &quot;&quot;, this._record.details || &quot;&quot;]};
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Protected
</span><span class="cx"> 
</span><del>-    onattach: function()
</del><ins>+    onattach()
</ins><span class="cx">     {
</span><span class="cx">         WebInspector.GeneralTreeElement.prototype.onattach.call(this);
</span><span class="cx"> 
</span><span class="lines">@@ -159,3 +148,14 @@
</span><span class="cx">         this._sourceCodeLocation.populateLiveDisplayLocationTooltip(this.element, tooltipPrefix);
</span><span class="cx">     }
</span><span class="cx"> };
</span><ins>+
+WebInspector.TimelineRecordTreeElement.StyleRecordIconStyleClass = &quot;style-record&quot;;
+WebInspector.TimelineRecordTreeElement.LayoutRecordIconStyleClass = &quot;layout-record&quot;;
+WebInspector.TimelineRecordTreeElement.PaintRecordIconStyleClass = &quot;paint-record&quot;;
+WebInspector.TimelineRecordTreeElement.RunLoopRecordIconStyleClass = &quot;runloop-record&quot;;
+WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass = &quot;evaluated-record&quot;;
+WebInspector.TimelineRecordTreeElement.EventRecordIconStyleClass = &quot;event-record&quot;;
+WebInspector.TimelineRecordTreeElement.TimerRecordIconStyleClass = &quot;timer-record&quot;;
+WebInspector.TimelineRecordTreeElement.AnimationRecordIconStyleClass = &quot;animation-record&quot;;
+WebInspector.TimelineRecordTreeElement.ProbeRecordIconStyleClass = &quot;probe-record&quot;;
+WebInspector.TimelineRecordTreeElement.ConsoleProfileIconStyleClass = &quot;console-profile-record&quot;;
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTreeElementStatusButtonjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,48 +23,40 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.TreeElementStatusButton = function(element) {
-    // FIXME: Convert this to a WebInspector.Object subclass, and call super().
-    // WebInspector.Object.call(this);
</del><ins>+WebInspector.TreeElementStatusButton = class TreeElementStatusButton extends WebInspector.Object
+{
+    constructor(element)
+    {
+        super();
</ins><span class="cx"> 
</span><del>-    console.assert(element);
</del><ins>+        console.assert(element);
</ins><span class="cx"> 
</span><del>-    this._element = element;
-    this._element.classList.add(WebInspector.TreeElementStatusButton.StyleClassName);
-    this._element.addEventListener(&quot;click&quot;, this._clicked.bind(this));
-};
</del><ins>+        this._element = element;
+        this._element.classList.add(&quot;status-button&quot;);
+        this._element.addEventListener(&quot;click&quot;, this._clicked.bind(this));
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.TreeElementStatusButton.StyleClassName = &quot;status-button&quot;;
-WebInspector.TreeElementStatusButton.DisabledStyleClassName = &quot;disabled&quot;;
-
-WebInspector.TreeElementStatusButton.Event = {
-    Clicked: &quot;status-button-clicked&quot;
-};
-
-WebInspector.TreeElementStatusButton.prototype = {
-    constructor: WebInspector.TreeElementStatusButton,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get element()
</span><span class="cx">     {
</span><span class="cx">         return this._element;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get hidden()
</span><span class="cx">     {
</span><span class="cx">         return !this._element.classList.contains(WebInspector.TreeElementStatusButton.DisabledStyleClassName);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set hidden(flag)
</span><span class="cx">     {
</span><span class="cx">         this._element.classList.toggle(&quot;hidden&quot;, flag);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get enabled()
</span><span class="cx">     {
</span><span class="cx">         return !this._element.classList.contains(WebInspector.TreeElementStatusButton.DisabledStyleClassName);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set enabled(flag)
</span><span class="cx">     {
</span><span class="lines">@@ -72,11 +64,11 @@
</span><span class="cx">             this._element.classList.remove(WebInspector.TreeElementStatusButton.DisabledStyleClassName);
</span><span class="cx">         else
</span><span class="cx">             this._element.classList.add(WebInspector.TreeElementStatusButton.DisabledStyleClassName);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span><del>-    _clicked: function(event)
</del><ins>+    _clicked(event)
</ins><span class="cx">     {
</span><span class="cx">         if (!this.enabled)
</span><span class="cx">             return;
</span><span class="lines">@@ -87,4 +79,8 @@
</span><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span><del>-WebInspector.TreeElementStatusButton.prototype.__proto__ = WebInspector.Object.prototype;
</del><ins>+WebInspector.TreeElementStatusButton.DisabledStyleClassName = &quot;disabled&quot;;
+
+WebInspector.TreeElementStatusButton.Event = {
+    Clicked: &quot;status-button-clicked&quot;
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2007, 2013 Apple Inc.  All rights reserved.
</del><ins>+ * Copyright (C) 2007, 2013, 2015 Apple Inc.  All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -26,188 +26,148 @@
</span><span class="cx">  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-function TreeOutline(listNode)
</del><ins>+WebInspector.TreeOutline = class TreeOutline extends WebInspector.Object
</ins><span class="cx"> {
</span><del>-    // FIXME: Convert this to a WebInspector.Object subclass, and call super().
-    // WebInspector.Object.call(this);
</del><ins>+    constructor(listNode)
+    {
+        super();
</ins><span class="cx"> 
</span><del>-    this.element = listNode;
</del><ins>+        this.element = listNode;
</ins><span class="cx"> 
</span><del>-    this.children = [];
-    this.selectedTreeElement = null;
-    this._childrenListNode = listNode;
-    this._childrenListNode.removeChildren();
-    this._knownTreeElements = [];
-    this._treeElementsExpandedState = [];
-    this.expandTreeElementsWhenArrowing = false;
-    this.allowsRepeatSelection = false;
-    this.root = true;
-    this.hasChildren = false;
-    this.expanded = true;
-    this.selected = false;
-    this.treeOutline = this;
</del><ins>+        this.children = [];
+        this.selectedTreeElement = null;
+        this._childrenListNode = listNode;
+        this._childrenListNode.removeChildren();
+        this._knownTreeElements = [];
+        this._treeElementsExpandedState = [];
+        this.expandTreeElementsWhenArrowing = false;
+        this.allowsRepeatSelection = false;
+        this.root = true;
+        this.hasChildren = false;
+        this.expanded = true;
+        this.selected = false;
+        this.treeOutline = this;
</ins><span class="cx"> 
</span><del>-    this._childrenListNode.tabIndex = 0;
-    this._childrenListNode.addEventListener(&quot;keydown&quot;, this._treeKeyDown.bind(this), true);
-}
-
-TreeOutline._knownTreeElementNextIdentifier = 1;
-TreeOutline.prototype.constructor = TreeOutline;
-
-TreeOutline.prototype.appendChild = function(child)
-{
-    if (!child)
-        throw &quot;child can't be undefined or null&quot;;
-
-    var lastChild = this.children[this.children.length - 1];
-    if (lastChild) {
-        lastChild.nextSibling = child;
-        child.previousSibling = lastChild;
-    } else {
-        child.previousSibling = null;
-        child.nextSibling = null;
</del><ins>+        this._childrenListNode.tabIndex = 0;
+        this._childrenListNode.addEventListener(&quot;keydown&quot;, this._treeKeyDown.bind(this), true);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    var isFirstChild = !this.children.length;
</del><ins>+    // Methods
</ins><span class="cx"> 
</span><del>-    this.children.push(child);
-    this.hasChildren = true;
-    child.parent = this;
-    child.treeOutline = this.treeOutline;
-    child.treeOutline._rememberTreeElement(child);
</del><ins>+    appendChild(child)
+    {
+        if (!child)
+            throw &quot;child can't be undefined or null&quot;;
</ins><span class="cx"> 
</span><del>-    var current = child.children[0];
-    while (current) {
-        current.treeOutline = this.treeOutline;
-        current.treeOutline._rememberTreeElement(current);
-        current = current.traverseNextTreeElement(false, child, true);
-    }
</del><ins>+        var lastChild = this.children[this.children.length - 1];
+        if (lastChild) {
+            lastChild.nextSibling = child;
+            child.previousSibling = lastChild;
+        } else {
+            child.previousSibling = null;
+            child.nextSibling = null;
+        }
</ins><span class="cx"> 
</span><del>-    if (child.hasChildren &amp;&amp; child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
-        child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
</del><ins>+        var isFirstChild = !this.children.length;
</ins><span class="cx"> 
</span><del>-    if (this._childrenListNode)
-        child._attach();
</del><ins>+        this.children.push(child);
+        this.hasChildren = true;
+        child.parent = this;
+        child.treeOutline = this.treeOutline;
+        child.treeOutline._rememberTreeElement(child);
</ins><span class="cx"> 
</span><del>-    if (this.treeOutline.onadd)
-        this.treeOutline.onadd(child);
</del><ins>+        var current = child.children[0];
+        while (current) {
+            current.treeOutline = this.treeOutline;
+            current.treeOutline._rememberTreeElement(current);
+            current = current.traverseNextTreeElement(false, child, true);
+        }
</ins><span class="cx"> 
</span><del>-    if (isFirstChild &amp;&amp; this.expanded)
-        this.expand();
-};
</del><ins>+        if (child.hasChildren &amp;&amp; child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
+            child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype.insertChild = function(child, index)
-{
-    if (!child)
-        throw &quot;child can't be undefined or null&quot;;
</del><ins>+        if (this._childrenListNode)
+            child._attach();
</ins><span class="cx"> 
</span><del>-    var previousChild = (index &gt; 0 ? this.children[index - 1] : null);
-    if (previousChild) {
-        previousChild.nextSibling = child;
-        child.previousSibling = previousChild;
-    } else {
-        child.previousSibling = null;
-    }
</del><ins>+        if (this.treeOutline.onadd)
+            this.treeOutline.onadd(child);
</ins><span class="cx"> 
</span><del>-    var nextChild = this.children[index];
-    if (nextChild) {
-        nextChild.previousSibling = child;
-        child.nextSibling = nextChild;
-    } else {
-        child.nextSibling = null;
</del><ins>+        if (isFirstChild &amp;&amp; this.expanded)
+            this.expand();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    var isFirstChild = !this.children.length;
</del><ins>+    insertChild(child, index)
+    {
+        if (!child)
+            throw &quot;child can't be undefined or null&quot;;
</ins><span class="cx"> 
</span><del>-    this.children.splice(index, 0, child);
-    this.hasChildren = true;
-    child.parent = this;
-    child.treeOutline = this.treeOutline;
-    child.treeOutline._rememberTreeElement(child);
</del><ins>+        var previousChild = (index &gt; 0 ? this.children[index - 1] : null);
+        if (previousChild) {
+            previousChild.nextSibling = child;
+            child.previousSibling = previousChild;
+        } else {
+            child.previousSibling = null;
+        }
</ins><span class="cx"> 
</span><del>-    var current = child.children[0];
-    while (current) {
-        current.treeOutline = this.treeOutline;
-        current.treeOutline._rememberTreeElement(current);
-        current = current.traverseNextTreeElement(false, child, true);
-    }
</del><ins>+        var nextChild = this.children[index];
+        if (nextChild) {
+            nextChild.previousSibling = child;
+            child.nextSibling = nextChild;
+        } else {
+            child.nextSibling = null;
+        }
</ins><span class="cx"> 
</span><del>-    if (child.hasChildren &amp;&amp; child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
-        child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
</del><ins>+        var isFirstChild = !this.children.length;
</ins><span class="cx"> 
</span><del>-    if (this._childrenListNode)
-        child._attach();
</del><ins>+        this.children.splice(index, 0, child);
+        this.hasChildren = true;
+        child.parent = this;
+        child.treeOutline = this.treeOutline;
+        child.treeOutline._rememberTreeElement(child);
</ins><span class="cx"> 
</span><del>-    if (this.treeOutline.onadd)
-        this.treeOutline.onadd(child);
</del><ins>+        var current = child.children[0];
+        while (current) {
+            current.treeOutline = this.treeOutline;
+            current.treeOutline._rememberTreeElement(current);
+            current = current.traverseNextTreeElement(false, child, true);
+        }
</ins><span class="cx"> 
</span><del>-    if (isFirstChild &amp;&amp; this.expanded)
-        this.expand();
-};
</del><ins>+        if (child.hasChildren &amp;&amp; child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
+            child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype.removeChildAtIndex = function(childIndex, suppressOnDeselect, suppressSelectSibling)
-{
-    if (childIndex &lt; 0 || childIndex &gt;= this.children.length)
-        throw &quot;childIndex out of range&quot;;
</del><ins>+        if (this._childrenListNode)
+            child._attach();
</ins><span class="cx"> 
</span><del>-    var child = this.children[childIndex];
-    this.children.splice(childIndex, 1);
</del><ins>+        if (this.treeOutline.onadd)
+            this.treeOutline.onadd(child);
</ins><span class="cx"> 
</span><del>-    var parent = child.parent;
-    if (child.deselect(suppressOnDeselect)) {
-        if (child.previousSibling &amp;&amp; !suppressSelectSibling)
-            child.previousSibling.select(true, false);
-        else if (child.nextSibling &amp;&amp; !suppressSelectSibling)
-            child.nextSibling.select(true, false);
-        else if (!suppressSelectSibling)
-            parent.select(true, false);
</del><ins>+        if (isFirstChild &amp;&amp; this.expanded)
+            this.expand();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    if (child.previousSibling)
-        child.previousSibling.nextSibling = child.nextSibling;
-    if (child.nextSibling)
-        child.nextSibling.previousSibling = child.previousSibling;
</del><ins>+    removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling)
+    {
+        if (childIndex &lt; 0 || childIndex &gt;= this.children.length)
+            throw &quot;childIndex out of range&quot;;
</ins><span class="cx"> 
</span><del>-    if (child.treeOutline) {
-        child.treeOutline._forgetTreeElement(child);
-        child.treeOutline._forgetChildrenRecursive(child);
-    }
</del><ins>+        var child = this.children[childIndex];
+        this.children.splice(childIndex, 1);
</ins><span class="cx"> 
</span><del>-    child._detach();
-    child.treeOutline = null;
-    child.parent = null;
-    child.nextSibling = null;
-    child.previousSibling = null;
</del><ins>+        var parent = child.parent;
+        if (child.deselect(suppressOnDeselect)) {
+            if (child.previousSibling &amp;&amp; !suppressSelectSibling)
+                child.previousSibling.select(true, false);
+            else if (child.nextSibling &amp;&amp; !suppressSelectSibling)
+                child.nextSibling.select(true, false);
+            else if (!suppressSelectSibling)
+                parent.select(true, false);
+        }
</ins><span class="cx"> 
</span><del>-    if (this.treeOutline &amp;&amp; this.treeOutline.onremove)
-        this.treeOutline.onremove(child);
-};
</del><ins>+        if (child.previousSibling)
+            child.previousSibling.nextSibling = child.nextSibling;
+        if (child.nextSibling)
+            child.nextSibling.previousSibling = child.previousSibling;
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype.removeChild = function(child, suppressOnDeselect, suppressSelectSibling)
-{
-    if (!child)
-        throw &quot;child can't be undefined or null&quot;;
-
-    var childIndex = this.children.indexOf(child);
-    if (childIndex === -1)
-        throw &quot;child not found in this node's children&quot;;
-
-    this.removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling);
-
-    if (!this.children.length) {
-        this._listItemNode.classList.remove(&quot;parent&quot;);
-        this.hasChildren = false;
-    }
-};
-
-TreeOutline.prototype.removeChildren = function(suppressOnDeselect)
-{
-    var treeOutline = this.treeOutline;
-
-    for (var i = 0; i &lt; this.children.length; ++i) {
-        var child = this.children[i];
-        child.deselect(suppressOnDeselect);
-
</del><span class="cx">         if (child.treeOutline) {
</span><span class="cx">             child.treeOutline._forgetTreeElement(child);
</span><span class="cx">             child.treeOutline._forgetChildrenRecursive(child);
</span><span class="lines">@@ -219,376 +179,439 @@
</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 (this.treeOutline &amp;&amp; this.treeOutline.onremove)
+            this.treeOutline.onremove(child);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    this.children = [];
-};
</del><ins>+    removeChild(child, suppressOnDeselect, suppressSelectSibling)
+    {
+        if (!child)
+            throw &quot;child can't be undefined or null&quot;;
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype.removeChildrenRecursive = function(suppressOnDeselect)
-{
-    var childrenToRemove = this.children;
</del><ins>+        var childIndex = this.children.indexOf(child);
+        if (childIndex === -1)
+            throw &quot;child not found in this node's children&quot;;
</ins><span class="cx"> 
</span><del>-    var treeOutline = this.treeOutline;
</del><ins>+        this.removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling);
</ins><span class="cx"> 
</span><del>-    var child = this.children[0];
-    while (child) {
-        if (child.children.length)
-            childrenToRemove = childrenToRemove.concat(child.children);
-        child = child.traverseNextTreeElement(false, this, true);
</del><ins>+        if (!this.children.length) {
+            this._listItemNode.classList.remove(&quot;parent&quot;);
+            this.hasChildren = false;
+        }
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    for (var i = 0; i &lt; childrenToRemove.length; ++i) {
-        child = childrenToRemove[i];
-        child.deselect(suppressOnDeselect);
</del><ins>+    removeChildren(suppressOnDeselect)
+    {
+        var treeOutline = this.treeOutline;
</ins><span class="cx"> 
</span><del>-        if (child.treeOutline)
-            child.treeOutline._forgetTreeElement(child);
</del><ins>+        for (var i = 0; i &lt; this.children.length; ++i) {
+            var child = this.children[i];
+            child.deselect(suppressOnDeselect);
</ins><span class="cx"> 
</span><del>-        child._detach();
-        child.children = [];
-        child.treeOutline = null;
-        child.parent = null;
-        child.nextSibling = null;
-        child.previousSibling = null;
</del><ins>+            if (child.treeOutline) {
+                child.treeOutline._forgetTreeElement(child);
+                child.treeOutline._forgetChildrenRecursive(child);
+            }
</ins><span class="cx"> 
</span><del>-        if (treeOutline &amp;&amp; treeOutline.onremove)
-            treeOutline.onremove(child);
</del><ins>+            child._detach();
+            child.treeOutline = null;
+            child.parent = null;
+            child.nextSibling = null;
+            child.previousSibling = null;
+
+            if (treeOutline &amp;&amp; treeOutline.onremove)
+                treeOutline.onremove(child);
+        }
+
+        this.children = [];
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    this.children = [];
-};
</del><ins>+    removeChildrenRecursive(suppressOnDeselect)
+    {
+        var childrenToRemove = this.children;
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype._rememberTreeElement = function(element)
-{
-    if (!this._knownTreeElements[element.identifier])
-        this._knownTreeElements[element.identifier] = [];
</del><ins>+        var treeOutline = this.treeOutline;
</ins><span class="cx"> 
</span><del>-    // check if the element is already known
-    var elements = this._knownTreeElements[element.identifier];
-    if (elements.indexOf(element) !== -1)
-        return;
</del><ins>+        var child = this.children[0];
+        while (child) {
+            if (child.children.length)
+                childrenToRemove = childrenToRemove.concat(child.children);
+            child = child.traverseNextTreeElement(false, this, true);
+        }
</ins><span class="cx"> 
</span><del>-    // add the element
-    elements.push(element);
-};
</del><ins>+        for (var i = 0; i &lt; childrenToRemove.length; ++i) {
+            child = childrenToRemove[i];
+            child.deselect(suppressOnDeselect);
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype._forgetTreeElement = function(element)
-{
-    if (this.selectedTreeElement === element)
-        this.selectedTreeElement = null;
-    if (this._knownTreeElements[element.identifier])
-        this._knownTreeElements[element.identifier].remove(element, true);
-};
</del><ins>+            if (child.treeOutline)
+                child.treeOutline._forgetTreeElement(child);
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype._forgetChildrenRecursive = function(parentElement)
-{
-    var child = parentElement.children[0];
-    while (child) {
-        this._forgetTreeElement(child);
-        child = child.traverseNextTreeElement(false, parentElement, true);
</del><ins>+            child._detach();
+            child.children = [];
+            child.treeOutline = null;
+            child.parent = null;
+            child.nextSibling = null;
+            child.previousSibling = null;
+
+            if (treeOutline &amp;&amp; treeOutline.onremove)
+                treeOutline.onremove(child);
+        }
+
+        this.children = [];
</ins><span class="cx">     }
</span><del>-};
</del><span class="cx"> 
</span><del>-TreeOutline.prototype.getCachedTreeElement = function(representedObject)
-{
-    if (!representedObject)
-        return null;
</del><ins>+    _rememberTreeElement(element)
+    {
+        if (!this._knownTreeElements[element.identifier])
+            this._knownTreeElements[element.identifier] = [];
</ins><span class="cx"> 
</span><del>-    if (representedObject.__treeElementIdentifier) {
-        // If this representedObject has a tree element identifier, and it is a known TreeElement
-        // in our tree we can just return that tree element.
-        var elements = this._knownTreeElements[representedObject.__treeElementIdentifier];
-        if (elements) {
-            for (var i = 0; i &lt; elements.length; ++i)
-                if (elements[i].representedObject === representedObject)
-                    return elements[i];
</del><ins>+        // check if the element is already known
+        var elements = this._knownTreeElements[element.identifier];
+        if (elements.indexOf(element) !== -1)
+            return;
+
+        // add the element
+        elements.push(element);
+    }
+
+    _forgetTreeElement(element)
+    {
+        if (this.selectedTreeElement === element)
+            this.selectedTreeElement = null;
+        if (this._knownTreeElements[element.identifier])
+            this._knownTreeElements[element.identifier].remove(element, true);
+    }
+
+    _forgetChildrenRecursive(parentElement)
+    {
+        var child = parentElement.children[0];
+        while (child) {
+            this._forgetTreeElement(child);
+            child = child.traverseNextTreeElement(false, parentElement, true);
</ins><span class="cx">         }
</span><span class="cx">     }
</span><del>-    return null;
-};
</del><span class="cx"> 
</span><del>-TreeOutline.prototype.findTreeElement = function(representedObject, isAncestor, getParent)
-{
-    if (!representedObject)
</del><ins>+    getCachedTreeElement(representedObject)
+    {
+        if (!representedObject)
+            return null;
+
+        if (representedObject.__treeElementIdentifier) {
+            // If this representedObject has a tree element identifier, and it is a known TreeElement
+            // in our tree we can just return that tree element.
+            var elements = this._knownTreeElements[representedObject.__treeElementIdentifier];
+            if (elements) {
+                for (var i = 0; i &lt; elements.length; ++i)
+                    if (elements[i].representedObject === representedObject)
+                        return elements[i];
+            }
+        }
</ins><span class="cx">         return null;
</span><ins>+    }
</ins><span class="cx"> 
</span><del>-    var cachedElement = this.getCachedTreeElement(representedObject);
-    if (cachedElement)
-        return cachedElement;
</del><ins>+    findTreeElement(representedObject, isAncestor, getParent)
+    {
+        if (!representedObject)
+            return null;
</ins><span class="cx"> 
</span><del>-    // The representedObject isn't known, so we start at the top of the tree and work down to find the first
-    // tree element that represents representedObject or one of its ancestors.
-    var item;
-    var found = false;
-    for (var i = 0; i &lt; this.children.length; ++i) {
-        item = this.children[i];
-        if (item.representedObject === representedObject || (isAncestor &amp;&amp; isAncestor(item.representedObject, representedObject))) {
-            found = true;
-            break;
</del><ins>+        var cachedElement = this.getCachedTreeElement(representedObject);
+        if (cachedElement)
+            return cachedElement;
+
+        // The representedObject isn't known, so we start at the top of the tree and work down to find the first
+        // tree element that represents representedObject or one of its ancestors.
+        var item;
+        var found = false;
+        for (var i = 0; i &lt; this.children.length; ++i) {
+            item = this.children[i];
+            if (item.representedObject === representedObject || (isAncestor &amp;&amp; isAncestor(item.representedObject, representedObject))) {
+                found = true;
+                break;
+            }
</ins><span class="cx">         }
</span><del>-    }
</del><span class="cx"> 
</span><del>-    if (!found)
-        return null;
</del><ins>+        if (!found)
+            return null;
</ins><span class="cx"> 
</span><del>-    // Make sure the item that we found is connected to the root of the tree.
-    // Build up a list of representedObject's ancestors that aren't already in our tree.
-    var ancestors = [];
-    var currentObject = representedObject;
-    while (currentObject) {
-        ancestors.unshift(currentObject);
-        if (currentObject === item.representedObject)
-            break;
-        currentObject = getParent(currentObject);
-    }
</del><ins>+        // Make sure the item that we found is connected to the root of the tree.
+        // Build up a list of representedObject's ancestors that aren't already in our tree.
+        var ancestors = [];
+        var currentObject = representedObject;
+        while (currentObject) {
+            ancestors.unshift(currentObject);
+            if (currentObject === item.representedObject)
+                break;
+            currentObject = getParent(currentObject);
+        }
</ins><span class="cx"> 
</span><del>-    // For each of those ancestors we populate them to fill in the tree.
-    for (var i = 0; i &lt; ancestors.length; ++i) {
-        // Make sure we don't call findTreeElement with the same representedObject
-        // again, to prevent infinite recursion.
-        if (ancestors[i] === representedObject)
-            continue;
</del><ins>+        // For each of those ancestors we populate them to fill in the tree.
+        for (var i = 0; i &lt; ancestors.length; ++i) {
+            // Make sure we don't call findTreeElement with the same representedObject
+            // again, to prevent infinite recursion.
+            if (ancestors[i] === representedObject)
+                continue;
</ins><span class="cx"> 
</span><del>-        // FIXME: we could do something faster than findTreeElement since we will know the next
-        // ancestor exists in the tree.
-        item = this.findTreeElement(ancestors[i], isAncestor, getParent);
-        if (item)
-            item.onpopulate();
</del><ins>+            // FIXME: we could do something faster than findTreeElement since we will know the next
+            // ancestor exists in the tree.
+            item = this.findTreeElement(ancestors[i], isAncestor, getParent);
+            if (item)
+                item.onpopulate();
+        }
+
+        return this.getCachedTreeElement(representedObject);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    return this.getCachedTreeElement(representedObject);
-};
</del><ins>+    _treeElementDidChange(treeElement)
+    {
+        if (treeElement.treeOutline !== this)
+            return;
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype._treeElementDidChange = function(treeElement)
-{
-    if (treeElement.treeOutline !== this)
-        return;
</del><ins>+        if (this.onchange)
+            this.onchange(treeElement);
+    }
</ins><span class="cx"> 
</span><del>-    if (this.onchange)
-        this.onchange(treeElement);
-};
</del><ins>+    treeElementFromNode(node)
+    {
+        var listNode = node.enclosingNodeOrSelfWithNodeNameInArray([&quot;ol&quot;, &quot;li&quot;]);
+        if (listNode)
+            return listNode.parentTreeElement || listNode.treeElement;
+        return null;
+    }
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype.treeElementFromNode = function(node)
-{
-    var listNode = node.enclosingNodeOrSelfWithNodeNameInArray([&quot;ol&quot;, &quot;li&quot;]);
-    if (listNode)
-        return listNode.parentTreeElement || listNode.treeElement;
-    return null;
-};
</del><ins>+    treeElementFromPoint(x, y)
+    {
+        var node = this._childrenListNode.ownerDocument.elementFromPoint(x, y);
+        if (!node)
+            return null;
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype.treeElementFromPoint = function(x, y)
-{
-    var node = this._childrenListNode.ownerDocument.elementFromPoint(x, y);
-    if (!node)
-        return null;
</del><ins>+        return this.treeElementFromNode(node);
+    }
</ins><span class="cx"> 
</span><del>-    return this.treeElementFromNode(node);
-};
</del><ins>+    _treeKeyDown(event)
+    {
+        if (event.target !== this._childrenListNode)
+            return;
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype._treeKeyDown = function(event)
-{
-    if (event.target !== this._childrenListNode)
-        return;
</del><ins>+        if (!this.selectedTreeElement || event.shiftKey || event.metaKey || event.ctrlKey)
+            return;
</ins><span class="cx"> 
</span><del>-    if (!this.selectedTreeElement || event.shiftKey || event.metaKey || event.ctrlKey)
-        return;
-
-    var handled = false;
-    var nextSelectedElement;
-    if (event.keyIdentifier === &quot;Up&quot; &amp;&amp; !event.altKey) {
-        nextSelectedElement = this.selectedTreeElement.traversePreviousTreeElement(true);
-        while (nextSelectedElement &amp;&amp; !nextSelectedElement.selectable)
-            nextSelectedElement = nextSelectedElement.traversePreviousTreeElement(!this.expandTreeElementsWhenArrowing);
-        handled = nextSelectedElement ? true : false;
-    } else if (event.keyIdentifier === &quot;Down&quot; &amp;&amp; !event.altKey) {
-        nextSelectedElement = this.selectedTreeElement.traverseNextTreeElement(true);
-        while (nextSelectedElement &amp;&amp; !nextSelectedElement.selectable)
-            nextSelectedElement = nextSelectedElement.traverseNextTreeElement(!this.expandTreeElementsWhenArrowing);
-        handled = nextSelectedElement ? true : false;
-    } else if (event.keyIdentifier === &quot;Left&quot;) {
-        if (this.selectedTreeElement.expanded) {
-            if (event.altKey)
-                this.selectedTreeElement.collapseRecursively();
-            else
-                this.selectedTreeElement.collapse();
-            handled = true;
-        } else if (this.selectedTreeElement.parent &amp;&amp; !this.selectedTreeElement.parent.root) {
-            handled = true;
-            if (this.selectedTreeElement.parent.selectable) {
-                nextSelectedElement = this.selectedTreeElement.parent;
-                while (nextSelectedElement &amp;&amp; !nextSelectedElement.selectable)
-                    nextSelectedElement = nextSelectedElement.parent;
-                handled = nextSelectedElement ? true : false;
-            } else if (this.selectedTreeElement.parent)
-                this.selectedTreeElement.parent.collapse();
-        }
-    } else if (event.keyIdentifier === &quot;Right&quot;) {
-        if (!this.selectedTreeElement.revealed()) {
-            this.selectedTreeElement.reveal();
-            handled = true;
-        } else if (this.selectedTreeElement.hasChildren) {
-            handled = true;
</del><ins>+        var handled = false;
+        var nextSelectedElement;
+        if (event.keyIdentifier === &quot;Up&quot; &amp;&amp; !event.altKey) {
+            nextSelectedElement = this.selectedTreeElement.traversePreviousTreeElement(true);
+            while (nextSelectedElement &amp;&amp; !nextSelectedElement.selectable)
+                nextSelectedElement = nextSelectedElement.traversePreviousTreeElement(!this.expandTreeElementsWhenArrowing);
+            handled = nextSelectedElement ? true : false;
+        } else if (event.keyIdentifier === &quot;Down&quot; &amp;&amp; !event.altKey) {
+            nextSelectedElement = this.selectedTreeElement.traverseNextTreeElement(true);
+            while (nextSelectedElement &amp;&amp; !nextSelectedElement.selectable)
+                nextSelectedElement = nextSelectedElement.traverseNextTreeElement(!this.expandTreeElementsWhenArrowing);
+            handled = nextSelectedElement ? true : false;
+        } else if (event.keyIdentifier === &quot;Left&quot;) {
</ins><span class="cx">             if (this.selectedTreeElement.expanded) {
</span><del>-                nextSelectedElement = this.selectedTreeElement.children[0];
-                while (nextSelectedElement &amp;&amp; !nextSelectedElement.selectable)
-                    nextSelectedElement = nextSelectedElement.nextSibling;
-                handled = nextSelectedElement ? true : false;
-            } else {
</del><span class="cx">                 if (event.altKey)
</span><del>-                    this.selectedTreeElement.expandRecursively();
</del><ins>+                    this.selectedTreeElement.collapseRecursively();
</ins><span class="cx">                 else
</span><del>-                    this.selectedTreeElement.expand();
</del><ins>+                    this.selectedTreeElement.collapse();
+                handled = true;
+            } else if (this.selectedTreeElement.parent &amp;&amp; !this.selectedTreeElement.parent.root) {
+                handled = true;
+                if (this.selectedTreeElement.parent.selectable) {
+                    nextSelectedElement = this.selectedTreeElement.parent;
+                    while (nextSelectedElement &amp;&amp; !nextSelectedElement.selectable)
+                        nextSelectedElement = nextSelectedElement.parent;
+                    handled = nextSelectedElement ? true : false;
+                } else if (this.selectedTreeElement.parent)
+                    this.selectedTreeElement.parent.collapse();
</ins><span class="cx">             }
</span><ins>+        } else if (event.keyIdentifier === &quot;Right&quot;) {
+            if (!this.selectedTreeElement.revealed()) {
+                this.selectedTreeElement.reveal();
+                handled = true;
+            } else if (this.selectedTreeElement.hasChildren) {
+                handled = true;
+                if (this.selectedTreeElement.expanded) {
+                    nextSelectedElement = this.selectedTreeElement.children[0];
+                    while (nextSelectedElement &amp;&amp; !nextSelectedElement.selectable)
+                        nextSelectedElement = nextSelectedElement.nextSibling;
+                    handled = nextSelectedElement ? true : false;
+                } else {
+                    if (event.altKey)
+                        this.selectedTreeElement.expandRecursively();
+                    else
+                        this.selectedTreeElement.expand();
+                }
+            }
+        } else if (event.keyCode === 8 /* Backspace */ || event.keyCode === 46 /* Delete */) {
+            if (this.selectedTreeElement.ondelete)
+                handled = this.selectedTreeElement.ondelete();
+            if (!handled &amp;&amp; this.treeOutline.ondelete)
+                handled = this.treeOutline.ondelete(this.selectedTreeElement);
+        } else if (isEnterKey(event)) {
+            if (this.selectedTreeElement.onenter)
+                handled = this.selectedTreeElement.onenter();
+            if (!handled &amp;&amp; this.treeOutline.onenter)
+                handled = this.treeOutline.onenter(this.selectedTreeElement);
+        } else if (event.keyIdentifier === &quot;U+0020&quot; /* Space */) {
+            if (this.selectedTreeElement.onspace)
+                handled = this.selectedTreeElement.onspace();
+            if (!handled &amp;&amp; this.treeOutline.onspace)
+                handled = this.treeOutline.onspace(this.selectedTreeElement);
</ins><span class="cx">         }
</span><del>-    } else if (event.keyCode === 8 /* Backspace */ || event.keyCode === 46 /* Delete */) {
-        if (this.selectedTreeElement.ondelete)
-            handled = this.selectedTreeElement.ondelete();
-        if (!handled &amp;&amp; this.treeOutline.ondelete)
-            handled = this.treeOutline.ondelete(this.selectedTreeElement);
-    } else if (isEnterKey(event)) {
-        if (this.selectedTreeElement.onenter)
-            handled = this.selectedTreeElement.onenter();
-        if (!handled &amp;&amp; this.treeOutline.onenter)
-            handled = this.treeOutline.onenter(this.selectedTreeElement);
-    } else if (event.keyIdentifier === &quot;U+0020&quot; /* Space */) {
-        if (this.selectedTreeElement.onspace)
-            handled = this.selectedTreeElement.onspace();
-        if (!handled &amp;&amp; this.treeOutline.onspace)
-            handled = this.treeOutline.onspace(this.selectedTreeElement);
</del><ins>+
+        if (nextSelectedElement) {
+            nextSelectedElement.reveal();
+            nextSelectedElement.select(false, true);
+        }
+
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    if (nextSelectedElement) {
-        nextSelectedElement.reveal();
-        nextSelectedElement.select(false, true);
</del><ins>+    expand()
+    {
+        // this is the root, do nothing
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    if (handled) {
-        event.preventDefault();
-        event.stopPropagation();
</del><ins>+    collapse()
+    {
+        // this is the root, do nothing
</ins><span class="cx">     }
</span><del>-};
</del><span class="cx"> 
</span><del>-TreeOutline.prototype.expand = function()
-{
-    // this is the root, do nothing
-};
</del><ins>+    revealed()
+    {
+        return true;
+    }
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype.collapse = function()
-{
-    // this is the root, do nothing
-};
</del><ins>+    reveal()
+    {
+        // this is the root, do nothing
+    }
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype.revealed = function()
-{
-    return true;
-};
</del><ins>+    select()
+    {
+        // this is the root, do nothing
+    }
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype.reveal = function()
-{
-    // this is the root, do nothing
</del><ins>+    revealAndSelect(omitFocus)
+    {
+        // this is the root, do nothing
+    }
</ins><span class="cx"> };
</span><span class="cx"> 
</span><del>-TreeOutline.prototype.select = function()
-{
-    // this is the root, do nothing
-};
</del><ins>+WebInspector.TreeOutline._knownTreeElementNextIdentifier = 1;
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype.revealAndSelect = function(omitFocus)
</del><ins>+WebInspector.TreeElement = class TreeElement extends WebInspector.Object
</ins><span class="cx"> {
</span><del>-    // this is the root, do nothing
-};
</del><ins>+    constructor(title, representedObject, hasChildren)
+    {
+        super();
</ins><span class="cx"> 
</span><del>-TreeOutline.prototype.__proto__ = WebInspector.Object.prototype;
</del><ins>+        this._title = title;
+        this.representedObject = (representedObject || {});
</ins><span class="cx"> 
</span><del>-function TreeElement(title, representedObject, hasChildren)
-{
-    // FIXME: Convert this to a WebInspector.Object subclass, and call super().
-    // WebInspector.Object.call(this);
</del><ins>+        if (this.representedObject.__treeElementIdentifier)
+            this.identifier = this.representedObject.__treeElementIdentifier;
+        else {
+            this.identifier = WebInspector.TreeOutline._knownTreeElementNextIdentifier++;
+            this.representedObject.__treeElementIdentifier = this.identifier;
+        }
</ins><span class="cx"> 
</span><del>-    this._title = title;
-    this.representedObject = (representedObject || {});
-
-    if (this.representedObject.__treeElementIdentifier)
-        this.identifier = this.representedObject.__treeElementIdentifier;
-    else {
-        this.identifier = TreeOutline._knownTreeElementNextIdentifier++;
-        this.representedObject.__treeElementIdentifier = this.identifier;
</del><ins>+        this._hidden = false;
+        this._selectable = true;
+        this.expanded = false;
+        this.selected = false;
+        this.hasChildren = hasChildren;
+        this.children = [];
+        this.treeOutline = null;
+        this.parent = null;
+        this.previousSibling = null;
+        this.nextSibling = null;
+        this._listItemNode = null;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    this._hidden = false;
-    this._selectable = true;
-    this.expanded = false;
-    this.selected = false;
-    this.hasChildren = hasChildren;
-    this.children = [];
-    this.treeOutline = null;
-    this.parent = null;
-    this.previousSibling = null;
-    this.nextSibling = null;
-    this._listItemNode = null;
-}
</del><ins>+    // Methods
</ins><span class="cx"> 
</span><del>-TreeElement.prototype = {
-    constructor: TreeElement,
</del><ins>+    appendChild() { return WebInspector.TreeOutline.prototype.appendChild.apply(this, arguments); }
+    insertChild() { return WebInspector.TreeOutline.prototype.insertChild.apply(this, arguments); }
+    removeChild() { return WebInspector.TreeOutline.prototype.removeChild.apply(this, arguments); }
+    removeChildAtIndex() { return WebInspector.TreeOutline.prototype.removeChildAtIndex.apply(this, arguments); }
+    removeChildren() { return WebInspector.TreeOutline.prototype.removeChildren.apply(this, arguments); }
+    removeChildrenRecursive() { return WebInspector.TreeOutline.prototype.removeChildrenRecursive.apply(this, arguments); }
</ins><span class="cx"> 
</span><del>-    arrowToggleWidth: 10,
</del><ins>+    get arrowToggleWidth()
+    {
+        return 10;
+    }
</ins><span class="cx"> 
</span><del>-    get selectable() {
</del><ins>+    get selectable()
+    {
</ins><span class="cx">         if (this._hidden)
</span><span class="cx">             return false;
</span><span class="cx">         return this._selectable;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    set selectable(x) {
</del><ins>+    set selectable(x)
+    {
</ins><span class="cx">         this._selectable = x;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    get listItemElement() {
</del><ins>+    get listItemElement()
+    {
</ins><span class="cx">         return this._listItemNode;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    get childrenListElement() {
</del><ins>+    get childrenListElement()
+    {
</ins><span class="cx">         return this._childrenListNode;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    get title() {
</del><ins>+    get title()
+    {
</ins><span class="cx">         return this._title;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    set title(x) {
</del><ins>+    set title(x)
+    {
</ins><span class="cx">         this._title = x;
</span><span class="cx">         this._setListItemNodeContent();
</span><span class="cx">         this.didChange();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    get titleHTML() {
</del><ins>+    get titleHTML()
+    {
</ins><span class="cx">         return this._titleHTML;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    set titleHTML(x) {
</del><ins>+    set titleHTML(x)
+    {
</ins><span class="cx">         this._titleHTML = x;
</span><span class="cx">         this._setListItemNodeContent();
</span><span class="cx">         this.didChange();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    get tooltip() {
</del><ins>+    get tooltip()
+    {
</ins><span class="cx">         return this._tooltip;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    set tooltip(x) {
</del><ins>+    set tooltip(x)
+    {
</ins><span class="cx">         this._tooltip = x;
</span><span class="cx">         if (this._listItemNode)
</span><span class="cx">             this._listItemNode.title = x ? x : &quot;&quot;;
</span><span class="cx">         this.didChange();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    get hasChildren() {
</del><ins>+    get hasChildren()
+    {
</ins><span class="cx">         return this._hasChildren;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    set hasChildren(x) {
</del><ins>+    set hasChildren(x)
+    {
</ins><span class="cx">         if (this._hasChildren === x)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="lines">@@ -605,13 +628,15 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this.didChange();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    get hidden() {
</del><ins>+    get hidden()
+    {
</ins><span class="cx">         return this._hidden;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    set hidden(x) {
</del><ins>+    set hidden(x)
+    {
</ins><span class="cx">         if (this._hidden === x)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="lines">@@ -631,27 +656,29 @@
</span><span class="cx"> 
</span><span class="cx">         if (this.treeOutline &amp;&amp; this.treeOutline.onhidden)
</span><span class="cx">             this.treeOutline.onhidden(this, x);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    get shouldRefreshChildren() {
</del><ins>+    get shouldRefreshChildren()
+    {
</ins><span class="cx">         return this._shouldRefreshChildren;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    set shouldRefreshChildren(x) {
</del><ins>+    set shouldRefreshChildren(x)
+    {
</ins><span class="cx">         this._shouldRefreshChildren = x;
</span><span class="cx">         if (x &amp;&amp; this.expanded)
</span><span class="cx">             this.expand();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _fireDidChange: function()
</del><ins>+    _fireDidChange()
</ins><span class="cx">     {
</span><span class="cx">         delete this._didChangeTimeoutIdentifier;
</span><span class="cx"> 
</span><span class="cx">         if (this.treeOutline)
</span><span class="cx">             this.treeOutline._treeElementDidChange(this);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    didChange: function()
</del><ins>+    didChange()
</ins><span class="cx">     {
</span><span class="cx">         if (!this.treeOutline)
</span><span class="cx">             return;
</span><span class="lines">@@ -659,9 +686,9 @@
</span><span class="cx">         // Prevent telling the TreeOutline multiple times in a row by delaying it with a timeout.
</span><span class="cx">         if (!this._didChangeTimeoutIdentifier)
</span><span class="cx">             this._didChangeTimeoutIdentifier = setTimeout(this._fireDidChange.bind(this), 0);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _setListItemNodeContent: function()
</del><ins>+    _setListItemNodeContent()
</ins><span class="cx">     {
</span><span class="cx">         if (!this._listItemNode)
</span><span class="cx">             return;
</span><span class="lines">@@ -679,401 +706,393 @@
</span><span class="cx">             this._listItemNode.appendChild(this._title);
</span><span class="cx">         }
</span><span class="cx">     }
</span><del>-};
</del><span class="cx"> 
</span><del>-TreeElement.prototype.appendChild = TreeOutline.prototype.appendChild;
-TreeElement.prototype.insertChild = TreeOutline.prototype.insertChild;
-TreeElement.prototype.removeChild = TreeOutline.prototype.removeChild;
-TreeElement.prototype.removeChildAtIndex = TreeOutline.prototype.removeChildAtIndex;
-TreeElement.prototype.removeChildren = TreeOutline.prototype.removeChildren;
-TreeElement.prototype.removeChildrenRecursive = TreeOutline.prototype.removeChildrenRecursive;
</del><ins>+    _attach()
+    {
+        if (!this._listItemNode || this.parent._shouldRefreshChildren) {
+            if (this._listItemNode &amp;&amp; this._listItemNode.parentNode)
+                this._listItemNode.parentNode.removeChild(this._listItemNode);
</ins><span class="cx"> 
</span><del>-TreeElement.prototype._attach = function()
-{
-    if (!this._listItemNode || this.parent._shouldRefreshChildren) {
-        if (this._listItemNode &amp;&amp; this._listItemNode.parentNode)
-            this._listItemNode.parentNode.removeChild(this._listItemNode);
</del><ins>+            this._listItemNode = this.treeOutline._childrenListNode.ownerDocument.createElement(&quot;li&quot;);
+            this._listItemNode.treeElement = this;
+            this._setListItemNodeContent();
+            this._listItemNode.title = this._tooltip ? this._tooltip : &quot;&quot;;
</ins><span class="cx"> 
</span><del>-        this._listItemNode = this.treeOutline._childrenListNode.ownerDocument.createElement(&quot;li&quot;);
-        this._listItemNode.treeElement = this;
-        this._setListItemNodeContent();
-        this._listItemNode.title = this._tooltip ? this._tooltip : &quot;&quot;;
</del><ins>+            if (this.hidden)
+                this._listItemNode.classList.add(&quot;hidden&quot;);
+            if (this.hasChildren)
+                this._listItemNode.classList.add(&quot;parent&quot;);
+            if (this.expanded)
+                this._listItemNode.classList.add(&quot;expanded&quot;);
+            if (this.selected)
+                this._listItemNode.classList.add(&quot;selected&quot;);
</ins><span class="cx"> 
</span><del>-        if (this.hidden)
-            this._listItemNode.classList.add(&quot;hidden&quot;);
-        if (this.hasChildren)
-            this._listItemNode.classList.add(&quot;parent&quot;);
-        if (this.expanded)
-            this._listItemNode.classList.add(&quot;expanded&quot;);
-        if (this.selected)
-            this._listItemNode.classList.add(&quot;selected&quot;);
</del><ins>+            this._listItemNode.addEventListener(&quot;mousedown&quot;, WebInspector.TreeElement.treeElementMouseDown);
+            this._listItemNode.addEventListener(&quot;click&quot;, WebInspector.TreeElement.treeElementToggled);
+            this._listItemNode.addEventListener(&quot;dblclick&quot;, WebInspector.TreeElement.treeElementDoubleClicked);
</ins><span class="cx"> 
</span><del>-        this._listItemNode.addEventListener(&quot;mousedown&quot;, TreeElement.treeElementMouseDown, false);
-        this._listItemNode.addEventListener(&quot;click&quot;, TreeElement.treeElementToggled, false);
-        this._listItemNode.addEventListener(&quot;dblclick&quot;, TreeElement.treeElementDoubleClicked, false);
</del><ins>+            if (this.onattach)
+                this.onattach(this);
+        }
</ins><span class="cx"> 
</span><del>-        if (this.onattach)
-            this.onattach(this);
</del><ins>+        var nextSibling = null;
+        if (this.nextSibling &amp;&amp; this.nextSibling._listItemNode &amp;&amp; this.nextSibling._listItemNode.parentNode === this.parent._childrenListNode)
+            nextSibling = this.nextSibling._listItemNode;
+        this.parent._childrenListNode.insertBefore(this._listItemNode, nextSibling);
+        if (this._childrenListNode)
+            this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
+        if (this.selected)
+            this.select();
+        if (this.expanded)
+            this.expand();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    var nextSibling = null;
-    if (this.nextSibling &amp;&amp; this.nextSibling._listItemNode &amp;&amp; this.nextSibling._listItemNode.parentNode === this.parent._childrenListNode)
-        nextSibling = this.nextSibling._listItemNode;
-    this.parent._childrenListNode.insertBefore(this._listItemNode, nextSibling);
-    if (this._childrenListNode)
-        this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
-    if (this.selected)
-        this.select();
-    if (this.expanded)
-        this.expand();
-};
</del><ins>+    _detach()
+    {
+        if (this.ondetach)
+            this.ondetach(this);
+        if (this._listItemNode &amp;&amp; this._listItemNode.parentNode)
+            this._listItemNode.parentNode.removeChild(this._listItemNode);
+        if (this._childrenListNode &amp;&amp; this._childrenListNode.parentNode)
+            this._childrenListNode.parentNode.removeChild(this._childrenListNode);
+    }
</ins><span class="cx"> 
</span><del>-TreeElement.prototype._detach = function()
-{
-    if (this.ondetach)
-        this.ondetach(this);
-    if (this._listItemNode &amp;&amp; this._listItemNode.parentNode)
-        this._listItemNode.parentNode.removeChild(this._listItemNode);
-    if (this._childrenListNode &amp;&amp; this._childrenListNode.parentNode)
-        this._childrenListNode.parentNode.removeChild(this._childrenListNode);
-};
</del><ins>+    static treeElementMouseDown(event)
+    {
+        var element = event.currentTarget;
+        if (!element || !element.treeElement || !element.treeElement.selectable)
+            return;
</ins><span class="cx"> 
</span><del>-TreeElement.treeElementMouseDown = function(event)
-{
-    var element = event.currentTarget;
-    if (!element || !element.treeElement || !element.treeElement.selectable)
-        return;
</del><ins>+        if (element.treeElement.isEventWithinDisclosureTriangle(event)) {
+            event.preventDefault();
+            return;
+        }
</ins><span class="cx"> 
</span><del>-    if (element.treeElement.isEventWithinDisclosureTriangle(event)) {
-        event.preventDefault();
-        return;
</del><ins>+        element.treeElement.selectOnMouseDown(event);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    element.treeElement.selectOnMouseDown(event);
-};
</del><ins>+    static treeElementToggled(event)
+    {
+        var element = event.currentTarget;
+        if (!element || !element.treeElement)
+            return;
</ins><span class="cx"> 
</span><del>-TreeElement.treeElementToggled = function(event)
-{
-    var element = event.currentTarget;
-    if (!element || !element.treeElement)
-        return;
</del><ins>+        var toggleOnClick = element.treeElement.toggleOnClick &amp;&amp; !element.treeElement.selectable;
+        var isInTriangle = element.treeElement.isEventWithinDisclosureTriangle(event);
+        if (!toggleOnClick &amp;&amp; !isInTriangle)
+            return;
</ins><span class="cx"> 
</span><del>-    var toggleOnClick = element.treeElement.toggleOnClick &amp;&amp; !element.treeElement.selectable;
-    var isInTriangle = element.treeElement.isEventWithinDisclosureTriangle(event);
-    if (!toggleOnClick &amp;&amp; !isInTriangle)
-        return;
</del><ins>+        if (element.treeElement.expanded) {
+            if (event.altKey)
+                element.treeElement.collapseRecursively();
+            else
+                element.treeElement.collapse();
+        } else {
+            if (event.altKey)
+                element.treeElement.expandRecursively();
+            else
+                element.treeElement.expand();
+        }
+        event.stopPropagation();
+    }
</ins><span class="cx"> 
</span><del>-    if (element.treeElement.expanded) {
-        if (event.altKey)
-            element.treeElement.collapseRecursively();
-        else
-            element.treeElement.collapse();
-    } else {
-        if (event.altKey)
-            element.treeElement.expandRecursively();
-        else
</del><ins>+    static treeElementDoubleClicked(event)
+    {
+        var element = event.currentTarget;
+        if (!element || !element.treeElement)
+            return;
+
+        if (element.treeElement.isEventWithinDisclosureTriangle(event))
+            return;
+
+        if (element.treeElement.ondblclick)
+            element.treeElement.ondblclick.call(element.treeElement, event);
+        else if (element.treeElement.hasChildren &amp;&amp; !element.treeElement.expanded)
</ins><span class="cx">             element.treeElement.expand();
</span><span class="cx">     }
</span><del>-    event.stopPropagation();
-};
</del><span class="cx"> 
</span><del>-TreeElement.treeElementDoubleClicked = function(event)
-{
-    var element = event.currentTarget;
-    if (!element || !element.treeElement)
-        return;
</del><ins>+    collapse()
+    {
+        if (this._listItemNode)
+            this._listItemNode.classList.remove(&quot;expanded&quot;);
+        if (this._childrenListNode)
+            this._childrenListNode.classList.remove(&quot;expanded&quot;);
</ins><span class="cx"> 
</span><del>-    if (element.treeElement.isEventWithinDisclosureTriangle(event))
-        return;
</del><ins>+        this.expanded = false;
+        if (this.treeOutline)
+            this.treeOutline._treeElementsExpandedState[this.identifier] = false;
</ins><span class="cx"> 
</span><del>-    if (element.treeElement.ondblclick)
-        element.treeElement.ondblclick.call(element.treeElement, event);
-    else if (element.treeElement.hasChildren &amp;&amp; !element.treeElement.expanded)
-        element.treeElement.expand();
-};
</del><ins>+        if (this.oncollapse)
+            this.oncollapse(this);
</ins><span class="cx"> 
</span><del>-TreeElement.prototype.collapse = function()
-{
-    if (this._listItemNode)
-        this._listItemNode.classList.remove(&quot;expanded&quot;);
-    if (this._childrenListNode)
-        this._childrenListNode.classList.remove(&quot;expanded&quot;);
</del><ins>+        if (this.treeOutline &amp;&amp; this.treeOutline.oncollapse)
+            this.treeOutline.oncollapse(this);
+    }
</ins><span class="cx"> 
</span><del>-    this.expanded = false;
-    if (this.treeOutline)
-        this.treeOutline._treeElementsExpandedState[this.identifier] = false;
</del><ins>+    collapseRecursively()
+    {
+        var item = this;
+        while (item) {
+            if (item.expanded)
+                item.collapse();
+            item = item.traverseNextTreeElement(false, this, true);
+        }
+    }
</ins><span class="cx"> 
</span><del>-    if (this.oncollapse)
-        this.oncollapse(this);
</del><ins>+    expand()
+    {
+        if (this.expanded &amp;&amp; !this._shouldRefreshChildren &amp;&amp; this._childrenListNode)
+            return;
</ins><span class="cx"> 
</span><del>-    if (this.treeOutline &amp;&amp; this.treeOutline.oncollapse)
-        this.treeOutline.oncollapse(this);
-};
</del><ins>+        // 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.
</ins><span class="cx"> 
</span><del>-TreeElement.prototype.collapseRecursively = function()
-{
-    var item = this;
-    while (item) {
-        if (item.expanded)
-            item.collapse();
-        item = item.traverseNextTreeElement(false, this, true);
-    }
-};
</del><ins>+        this.expanded = true;
+        if (this.treeOutline)
+            this.treeOutline._treeElementsExpandedState[this.identifier] = true;
</ins><span class="cx"> 
</span><del>-TreeElement.prototype.expand = function()
-{
-    if (this.expanded &amp;&amp; !this._shouldRefreshChildren &amp;&amp; this._childrenListNode)
-        return;
</del><ins>+        // If there are no children, return. We will be expanded once we have children.
+        if (!this.hasChildren)
+            return;
</ins><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>+        if (this.treeOutline &amp;&amp; (!this._childrenListNode || this._shouldRefreshChildren)) {
+            if (this._childrenListNode &amp;&amp; this._childrenListNode.parentNode)
+                this._childrenListNode.parentNode.removeChild(this._childrenListNode);
</ins><span class="cx"> 
</span><del>-    this.expanded = true;
-    if (this.treeOutline)
-        this.treeOutline._treeElementsExpandedState[this.identifier] = true;
</del><ins>+            this._childrenListNode = this.treeOutline._childrenListNode.ownerDocument.createElement(&quot;ol&quot;);
+            this._childrenListNode.parentTreeElement = this;
+            this._childrenListNode.classList.add(&quot;children&quot;);
</ins><span class="cx"> 
</span><del>-    // If there are no children, return. We will be expanded once we have children.
-    if (!this.hasChildren)
-        return;
</del><ins>+            if (this.hidden)
+                this._childrenListNode.classList.add(&quot;hidden&quot;);
</ins><span class="cx"> 
</span><del>-    if (this.treeOutline &amp;&amp; (!this._childrenListNode || this._shouldRefreshChildren)) {
-        if (this._childrenListNode &amp;&amp; this._childrenListNode.parentNode)
-            this._childrenListNode.parentNode.removeChild(this._childrenListNode);
</del><ins>+            this.onpopulate();
</ins><span class="cx"> 
</span><del>-        this._childrenListNode = this.treeOutline._childrenListNode.ownerDocument.createElement(&quot;ol&quot;);
-        this._childrenListNode.parentTreeElement = this;
-        this._childrenListNode.classList.add(&quot;children&quot;);
</del><ins>+            for (var i = 0; i &lt; this.children.length; ++i)
+                this.children[i]._attach();
</ins><span class="cx"> 
</span><del>-        if (this.hidden)
-            this._childrenListNode.classList.add(&quot;hidden&quot;);
</del><ins>+            delete this._shouldRefreshChildren;
+        }
</ins><span class="cx"> 
</span><del>-        this.onpopulate();
</del><ins>+        if (this._listItemNode) {
+            this._listItemNode.classList.add(&quot;expanded&quot;);
+            if (this._childrenListNode &amp;&amp; this._childrenListNode.parentNode !== this._listItemNode.parentNode)
+                this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
+        }
</ins><span class="cx"> 
</span><del>-        for (var i = 0; i &lt; this.children.length; ++i)
-            this.children[i]._attach();
</del><ins>+        if (this._childrenListNode)
+            this._childrenListNode.classList.add(&quot;expanded&quot;);
</ins><span class="cx"> 
</span><del>-        delete this._shouldRefreshChildren;
-    }
</del><ins>+        if (this.onexpand)
+            this.onexpand(this);
</ins><span class="cx"> 
</span><del>-    if (this._listItemNode) {
-        this._listItemNode.classList.add(&quot;expanded&quot;);
-        if (this._childrenListNode &amp;&amp; this._childrenListNode.parentNode !== this._listItemNode.parentNode)
-            this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
</del><ins>+        if (this.treeOutline &amp;&amp; this.treeOutline.onexpand)
+            this.treeOutline.onexpand(this);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    if (this._childrenListNode)
-        this._childrenListNode.classList.add(&quot;expanded&quot;);
</del><ins>+    expandRecursively(maxDepth)
+    {
+        var item = this;
+        var info = {};
+        var depth = 0;
</ins><span class="cx"> 
</span><del>-    if (this.onexpand)
-        this.onexpand(this);
</del><ins>+        // The Inspector uses TreeOutlines to represents object properties, so recursive expansion
+        // in some case can be infinite, since JavaScript objects can hold circular references.
+        // So default to a recursion cap of 3 levels, since that gives fairly good results.
+        if (maxDepth === undefined)
+            maxDepth = 3;
</ins><span class="cx"> 
</span><del>-    if (this.treeOutline &amp;&amp; this.treeOutline.onexpand)
-        this.treeOutline.onexpand(this);
-};
</del><ins>+        while (item) {
+            if (depth &lt; maxDepth)
+                item.expand();
+            item = item.traverseNextTreeElement(false, this, (depth &gt;= maxDepth), info);
+            depth += info.depthChange;
+        }
+    }
</ins><span class="cx"> 
</span><del>-TreeElement.prototype.expandRecursively = function(maxDepth)
-{
-    var item = this;
-    var info = {};
-    var depth = 0;
</del><ins>+    hasAncestor(ancestor)
+        {
+        if (!ancestor)
+            return false;
</ins><span class="cx"> 
</span><del>-    // The Inspector uses TreeOutlines to represents object properties, so recursive expansion
-    // in some case can be infinite, since JavaScript objects can hold circular references.
-    // So default to a recursion cap of 3 levels, since that gives fairly good results.
-    if (maxDepth === undefined)
-        maxDepth = 3;
</del><ins>+        var currentNode = this.parent;
+        while (currentNode) {
+            if (ancestor === currentNode)
+                return true;
+            currentNode = currentNode.parent;
+        }
</ins><span class="cx"> 
</span><del>-    while (item) {
-        if (depth &lt; maxDepth)
-            item.expand();
-        item = item.traverseNextTreeElement(false, this, (depth &gt;= maxDepth), info);
-        depth += info.depthChange;
-    }
-};
-
-TreeElement.prototype.hasAncestor = function(ancestor) {
-    if (!ancestor)
</del><span class="cx">         return false;
</span><del>-
-    var currentNode = this.parent;
-    while (currentNode) {
-        if (ancestor === currentNode)
-            return true;
-        currentNode = currentNode.parent;
</del><span class="cx">     }
</span><span class="cx"> 
</span><del>-    return false;
-};
</del><ins>+    reveal()
+    {
+        var currentAncestor = this.parent;
+        while (currentAncestor &amp;&amp; !currentAncestor.root) {
+            if (!currentAncestor.expanded)
+                currentAncestor.expand();
+            currentAncestor = currentAncestor.parent;
+        }
</ins><span class="cx"> 
</span><del>-TreeElement.prototype.reveal = function()
-{
-    var currentAncestor = this.parent;
-    while (currentAncestor &amp;&amp; !currentAncestor.root) {
-        if (!currentAncestor.expanded)
-            currentAncestor.expand();
-        currentAncestor = currentAncestor.parent;
</del><ins>+        if (this.onreveal)
+            this.onreveal(this);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    if (this.onreveal)
-        this.onreveal(this);
-};
</del><ins>+    revealed()
+    {
+        if (this.hidden)
+            return false;
</ins><span class="cx"> 
</span><del>-TreeElement.prototype.revealed = function()
-{
-    if (this.hidden)
-        return false;
</del><ins>+        var currentAncestor = this.parent;
+        while (currentAncestor &amp;&amp; !currentAncestor.root) {
+            if (!currentAncestor.expanded)
+                return false;
+            if (currentAncestor.hidden)
+                return false;
+            currentAncestor = currentAncestor.parent;
+        }
</ins><span class="cx"> 
</span><del>-    var currentAncestor = this.parent;
-    while (currentAncestor &amp;&amp; !currentAncestor.root) {
-        if (!currentAncestor.expanded)
-            return false;
-        if (currentAncestor.hidden)
-            return false;
-        currentAncestor = currentAncestor.parent;
</del><ins>+        return true;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    return true;
-};
</del><ins>+    selectOnMouseDown(event)
+    {
+        this.select(false, true);
+    }
</ins><span class="cx"> 
</span><del>-TreeElement.prototype.selectOnMouseDown = function(event)
-{
-    this.select(false, true);
-};
</del><ins>+    select(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
+    {
+        if (!this.treeOutline || !this.selectable)
+            return;
</ins><span class="cx"> 
</span><del>-TreeElement.prototype.select = function(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
-{
-    if (!this.treeOutline || !this.selectable)
-        return;
</del><ins>+        if (this.selected &amp;&amp; !this.treeOutline.allowsRepeatSelection)
+            return;
</ins><span class="cx"> 
</span><del>-    if (this.selected &amp;&amp; !this.treeOutline.allowsRepeatSelection)
-        return;
</del><ins>+        if (!omitFocus)
+            this.treeOutline._childrenListNode.focus();
</ins><span class="cx"> 
</span><del>-    if (!omitFocus)
-        this.treeOutline._childrenListNode.focus();
</del><ins>+        // Focusing on another node may detach &quot;this&quot; from tree.
+        if (!this.treeOutline)
+            return;
</ins><span class="cx"> 
</span><del>-    // Focusing on another node may detach &quot;this&quot; from tree.
-    if (!this.treeOutline)
-        return;
</del><ins>+        this.treeOutline.processingSelectionChange = true;
</ins><span class="cx"> 
</span><del>-    this.treeOutline.processingSelectionChange = true;
</del><ins>+        if (!this.selected) {
+            if (this.treeOutline.selectedTreeElement)
+                this.treeOutline.selectedTreeElement.deselect(suppressOnDeselect);
</ins><span class="cx"> 
</span><del>-    if (!this.selected) {
-        if (this.treeOutline.selectedTreeElement)
-            this.treeOutline.selectedTreeElement.deselect(suppressOnDeselect);
</del><ins>+            this.selected = true;
+            this.treeOutline.selectedTreeElement = this;
</ins><span class="cx"> 
</span><del>-        this.selected = true;
-        this.treeOutline.selectedTreeElement = this;
</del><ins>+            if (this._listItemNode)
+                this._listItemNode.classList.add(&quot;selected&quot;);
+        }
</ins><span class="cx"> 
</span><del>-        if (this._listItemNode)
-            this._listItemNode.classList.add(&quot;selected&quot;);
-    }
</del><ins>+        if (this.onselect &amp;&amp; !suppressOnSelect)
+            this.onselect(this, selectedByUser);
</ins><span class="cx"> 
</span><del>-    if (this.onselect &amp;&amp; !suppressOnSelect)
-        this.onselect(this, selectedByUser);
</del><ins>+        if (this.treeOutline.onselect &amp;&amp; !suppressOnSelect)
+            this.treeOutline.onselect(this, selectedByUser);
</ins><span class="cx"> 
</span><del>-    if (this.treeOutline.onselect &amp;&amp; !suppressOnSelect)
-        this.treeOutline.onselect(this, selectedByUser);
</del><ins>+        delete this.treeOutline.processingSelectionChange;
+    }
</ins><span class="cx"> 
</span><del>-    delete this.treeOutline.processingSelectionChange;
-};
</del><ins>+    revealAndSelect(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
+    {
+        this.reveal();
+        this.select(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect);
+    }
</ins><span class="cx"> 
</span><del>-TreeElement.prototype.revealAndSelect = function(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
-{
-    this.reveal();
-    this.select(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect);
-};
</del><ins>+    deselect(suppressOnDeselect)
+    {
+        if (!this.treeOutline || this.treeOutline.selectedTreeElement !== this || !this.selected)
+            return false;
</ins><span class="cx"> 
</span><del>-TreeElement.prototype.deselect = function(suppressOnDeselect)
-{
-    if (!this.treeOutline || this.treeOutline.selectedTreeElement !== this || !this.selected)
-        return false;
</del><ins>+        this.selected = false;
+        this.treeOutline.selectedTreeElement = null;
</ins><span class="cx"> 
</span><del>-    this.selected = false;
-    this.treeOutline.selectedTreeElement = null;
</del><ins>+        if (this._listItemNode)
+            this._listItemNode.classList.remove(&quot;selected&quot;);
</ins><span class="cx"> 
</span><del>-    if (this._listItemNode)
-        this._listItemNode.classList.remove(&quot;selected&quot;);
</del><ins>+        if (this.ondeselect &amp;&amp; !suppressOnDeselect)
+            this.ondeselect(this);
</ins><span class="cx"> 
</span><del>-    if (this.ondeselect &amp;&amp; !suppressOnDeselect)
-        this.ondeselect(this);
</del><ins>+        if (this.treeOutline.ondeselect &amp;&amp; !suppressOnDeselect)
+            this.treeOutline.ondeselect(this);
</ins><span class="cx"> 
</span><del>-    if (this.treeOutline.ondeselect &amp;&amp; !suppressOnDeselect)
-        this.treeOutline.ondeselect(this);
</del><ins>+        return true;
+    }
</ins><span class="cx"> 
</span><del>-    return true;
-};
</del><ins>+    onpopulate()
+    {
+        // Overriden by subclasses.
+    }
</ins><span class="cx"> 
</span><del>-TreeElement.prototype.onpopulate = function()
-{
-    // Overriden by subclasses.
-};
</del><ins>+    traverseNextTreeElement(skipUnrevealed, stayWithin, dontPopulate, info)
+    {
+        if (!dontPopulate &amp;&amp; this.hasChildren)
+            this.onpopulate.call(this); // FIXME: This shouldn't need to use call, but this is working around a JSC bug. https://webkit.org/b/74811
</ins><span class="cx"> 
</span><del>-TreeElement.prototype.traverseNextTreeElement = function(skipUnrevealed, stayWithin, dontPopulate, info)
-{
-    if (!dontPopulate &amp;&amp; this.hasChildren)
-        this.onpopulate.call(this); // FIXME: This shouldn't need to use call, but this is working around a JSC bug. https://webkit.org/b/74811
-
-    if (info)
-        info.depthChange = 0;
-
-    var element = skipUnrevealed ? (this.revealed() ? this.children[0] : null) : this.children[0];
-    if (element &amp;&amp; (!skipUnrevealed || (skipUnrevealed &amp;&amp; this.expanded))) {
</del><span class="cx">         if (info)
</span><del>-            info.depthChange = 1;
-        return element;
-    }
</del><ins>+            info.depthChange = 0;
</ins><span class="cx"> 
</span><del>-    if (this === stayWithin)
-        return null;
</del><ins>+        var element = skipUnrevealed ? (this.revealed() ? this.children[0] : null) : this.children[0];
+        if (element &amp;&amp; (!skipUnrevealed || (skipUnrevealed &amp;&amp; this.expanded))) {
+            if (info)
+                info.depthChange = 1;
+            return element;
+        }
</ins><span class="cx"> 
</span><del>-    element = skipUnrevealed ? (this.revealed() ? this.nextSibling : null) : this.nextSibling;
-    if (element)
-        return element;
</del><ins>+        if (this === stayWithin)
+            return null;
</ins><span class="cx"> 
</span><del>-    element = this;
-    while (element &amp;&amp; !element.root &amp;&amp; !(skipUnrevealed ? (element.revealed() ? element.nextSibling : null) : element.nextSibling) &amp;&amp; element.parent !== stayWithin) {
-        if (info)
-            info.depthChange -= 1;
-        element = element.parent;
-    }
</del><ins>+        element = skipUnrevealed ? (this.revealed() ? this.nextSibling : null) : this.nextSibling;
+        if (element)
+            return element;
</ins><span class="cx"> 
</span><del>-    if (!element)
-        return null;
</del><ins>+        element = this;
+        while (element &amp;&amp; !element.root &amp;&amp; !(skipUnrevealed ? (element.revealed() ? element.nextSibling : null) : element.nextSibling) &amp;&amp; element.parent !== stayWithin) {
+            if (info)
+                info.depthChange -= 1;
+            element = element.parent;
+        }
</ins><span class="cx"> 
</span><del>-    return (skipUnrevealed ? (element.revealed() ? element.nextSibling : null) : element.nextSibling);
-};
</del><ins>+        if (!element)
+            return null;
</ins><span class="cx"> 
</span><del>-TreeElement.prototype.traversePreviousTreeElement = function(skipUnrevealed, dontPopulate)
-{
-    var element = skipUnrevealed ? (this.revealed() ? this.previousSibling : null) : this.previousSibling;
-    if (!dontPopulate &amp;&amp; element &amp;&amp; element.hasChildren)
-        element.onpopulate();
</del><ins>+        return (skipUnrevealed ? (element.revealed() ? element.nextSibling : null) : element.nextSibling);
+    }
</ins><span class="cx"> 
</span><del>-    while (element &amp;&amp; (skipUnrevealed ? (element.revealed() &amp;&amp; element.expanded ? element.children[element.children.length - 1] : null) : element.children[element.children.length - 1])) {
-        if (!dontPopulate &amp;&amp; element.hasChildren)
</del><ins>+    traversePreviousTreeElement(skipUnrevealed, dontPopulate)
+    {
+        var element = skipUnrevealed ? (this.revealed() ? this.previousSibling : null) : this.previousSibling;
+        if (!dontPopulate &amp;&amp; element &amp;&amp; element.hasChildren)
</ins><span class="cx">             element.onpopulate();
</span><del>-        element = (skipUnrevealed ? (element.revealed() &amp;&amp; element.expanded ? element.children[element.children.length - 1] : null) : element.children[element.children.length - 1]);
-    }
</del><span class="cx"> 
</span><del>-    if (element)
-        return element;
</del><ins>+        while (element &amp;&amp; (skipUnrevealed ? (element.revealed() &amp;&amp; element.expanded ? element.children[element.children.length - 1] : null) : element.children[element.children.length - 1])) {
+            if (!dontPopulate &amp;&amp; element.hasChildren)
+                element.onpopulate();
+            element = (skipUnrevealed ? (element.revealed() &amp;&amp; element.expanded ? element.children[element.children.length - 1] : null) : element.children[element.children.length - 1]);
+        }
</ins><span class="cx"> 
</span><del>-    if (!this.parent || this.parent.root)
-        return null;
</del><ins>+        if (element)
+            return element;
</ins><span class="cx"> 
</span><del>-    return this.parent;
-};
</del><ins>+        if (!this.parent || this.parent.root)
+            return null;
</ins><span class="cx"> 
</span><del>-TreeElement.prototype.isEventWithinDisclosureTriangle = function(event)
-{
-    if (!document.contains(this._listItemNode))
-        return false;
</del><ins>+        return this.parent;
+    }
</ins><span class="cx"> 
</span><del>-    // FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446)
-    var computedLeftPadding = window.getComputedStyle(this._listItemNode).getPropertyCSSValue(&quot;padding-left&quot;).getFloatValue(CSSPrimitiveValue.CSS_PX);
-    var left = this._listItemNode.totalOffsetLeft + computedLeftPadding;
-    return event.pageX &gt;= left &amp;&amp; event.pageX &lt;= left + this.arrowToggleWidth &amp;&amp; this.hasChildren;
</del><ins>+    isEventWithinDisclosureTriangle(event)
+    {
+        if (!document.contains(this._listItemNode))
+            return false;
+
+        // FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446)
+        var computedLeftPadding = window.getComputedStyle(this._listItemNode).getPropertyCSSValue(&quot;padding-left&quot;).getFloatValue(CSSPrimitiveValue.CSS_PX);
+        var left = this._listItemNode.totalOffsetLeft + computedLeftPadding;
+        return event.pageX &gt;= left &amp;&amp; event.pageX &lt;= left + this.arrowToggleWidth &amp;&amp; this.hasChildren;
+    }
</ins><span class="cx"> };
</span><del>-
-TreeElement.prototype.__proto__ = WebInspector.Object.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlineDataGridSynchronizerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutlineDataGridSynchronizer.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutlineDataGridSynchronizer.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutlineDataGridSynchronizer.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,125 +23,122 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.TreeOutlineDataGridSynchronizer = function(treeOutline, dataGrid, delegate)
</del><ins>+WebInspector.TreeOutlineDataGridSynchronizer = class TreeOutlineDataGridSynchronizer extends WebInspector.Object
</ins><span class="cx"> {
</span><del>-    // FIXME: Convert this to a WebInspector.Object subclass, and call super().
-    // WebInspector.Object.call(this);
</del><ins>+    constructor(treeOutline, dataGrid, delegate)
+    {
+        super();
</ins><span class="cx"> 
</span><del>-    this._treeOutline = treeOutline;
-    this._dataGrid = dataGrid;
-    this._delegate = delegate || null;
-    this._enabled = true;
</del><ins>+        this._treeOutline = treeOutline;
+        this._dataGrid = dataGrid;
+        this._delegate = delegate || null;
+        this._enabled = true;
</ins><span class="cx"> 
</span><del>-    this._treeOutline.element.parentNode.addEventListener(&quot;scroll&quot;, this._treeOutlineScrolled.bind(this));
-    this._dataGrid.scrollContainer.addEventListener(&quot;scroll&quot;, this._dataGridScrolled.bind(this));
</del><ins>+        this._treeOutline.element.parentNode.addEventListener(&quot;scroll&quot;, this._treeOutlineScrolled.bind(this));
+        this._dataGrid.scrollContainer.addEventListener(&quot;scroll&quot;, this._dataGridScrolled.bind(this));
</ins><span class="cx"> 
</span><del>-    this._treeOutline.__dataGridNode = this._dataGrid;
</del><ins>+        this._treeOutline.__dataGridNode = this._dataGrid;
</ins><span class="cx"> 
</span><del>-    this._dataGrid.addEventListener(WebInspector.DataGrid.Event.ExpandedNode, this._dataGridNodeExpanded, this);
-    this._dataGrid.addEventListener(WebInspector.DataGrid.Event.CollapsedNode, this._dataGridNodeCollapsed, this);
-    this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
</del><ins>+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.ExpandedNode, this._dataGridNodeExpanded, this);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.CollapsedNode, this._dataGridNodeCollapsed, this);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
</ins><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;
</del><ins>+        // 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;
</ins><span class="cx"> 
</span><del>-    treeOutline.onadd = function(element) {
-        this._treeElementAdded(element);
-        if (existingOnAdd)
-            existingOnAdd.call(treeOutline, element);
-    }.bind(this);
</del><ins>+        treeOutline.onadd = function(element) {
+            this._treeElementAdded(element);
+            if (existingOnAdd)
+                existingOnAdd.call(treeOutline, element);
+        }.bind(this);
</ins><span class="cx"> 
</span><del>-    treeOutline.onremove = function(element) {
-        this._treeElementRemoved(element);
-        if (existingOnRemove)
-            existingOnRemove.call(treeOutline, element);
-    }.bind(this);
</del><ins>+        treeOutline.onremove = function(element) {
+            this._treeElementRemoved(element);
+            if (existingOnRemove)
+                existingOnRemove.call(treeOutline, element);
+        }.bind(this);
</ins><span class="cx"> 
</span><del>-    treeOutline.onexpand = function(element) {
-        this._treeElementExpanded(element);
-        if (existingOnExpand)
-            existingOnExpand.call(treeOutline, element);
-    }.bind(this);
</del><ins>+        treeOutline.onexpand = function(element) {
+            this._treeElementExpanded(element);
+            if (existingOnExpand)
+                existingOnExpand.call(treeOutline, element);
+        }.bind(this);
</ins><span class="cx"> 
</span><del>-    treeOutline.oncollapse = function(element) {
-        this._treeElementCollapsed(element);
-        if (existingOnCollapse)
-            existingOnCollapse.call(treeOutline, element);
-    }.bind(this);
</del><ins>+        treeOutline.oncollapse = function(element) {
+            this._treeElementCollapsed(element);
+            if (existingOnCollapse)
+                existingOnCollapse.call(treeOutline, element);
+        }.bind(this);
</ins><span class="cx"> 
</span><del>-    treeOutline.onhidden = function(element, hidden) {
-        this._treeElementHiddenChanged(element, hidden);
-        if (existingOnHidden)
-            existingOnHidden.call(treeOutline, element, hidden);
-    }.bind(this);
</del><ins>+        treeOutline.onhidden = function(element, hidden) {
+            this._treeElementHiddenChanged(element, hidden);
+            if (existingOnHidden)
+                existingOnHidden.call(treeOutline, element, hidden);
+        }.bind(this);
</ins><span class="cx"> 
</span><del>-    treeOutline.onselect = function(element, selectedByUser) {
-        this._treeElementSelected(element, selectedByUser);
-        if (existingOnSelect)
-            existingOnSelect.call(treeOutline, element, selectedByUser);
-    }.bind(this);
-};
</del><ins>+        treeOutline.onselect = function(element, selectedByUser) {
+            this._treeElementSelected(element, selectedByUser);
+            if (existingOnSelect)
+                existingOnSelect.call(treeOutline, element, selectedByUser);
+        }.bind(this);
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.TreeOutlineDataGridSynchronizer.prototype = {
-    constructor: WebInspector.TreeOutlineDataGridSynchronizer,
-    __proto__: WebInspector.Object.prototype,
-
</del><span class="cx">     // Public
</span><span class="cx"> 
</span><span class="cx">     get treeOutline()
</span><span class="cx">     {
</span><span class="cx">         return this._treeOutline;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get dataGrid()
</span><span class="cx">     {
</span><span class="cx">         return this._dataGrid;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get delegate()
</span><span class="cx">     {
</span><span class="cx">         return this._delegate;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     get enabled()
</span><span class="cx">     {
</span><span class="cx">         return this._enabled;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     set enabled(x)
</span><span class="cx">     {
</span><span class="cx">         this._enabled = x || false;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    associate: function(treeElement, dataGridNode)
</del><ins>+    associate(treeElement, dataGridNode)
</ins><span class="cx">     {
</span><span class="cx">         console.assert(treeElement);
</span><span class="cx">         console.assert(dataGridNode);
</span><span class="cx"> 
</span><span class="cx">         treeElement.__dataGridNode = dataGridNode;
</span><span class="cx">         dataGridNode.__treeElement = treeElement;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    synchronize: function()
</del><ins>+    synchronize()
</ins><span class="cx">     {
</span><span class="cx">         this._dataGrid.scrollContainer.scrollTop = this._treeOutline.element.parentNode.scrollTop;
</span><span class="cx">         if (this._treeOutline.selectedTreeElement)
</span><span class="cx">             this._treeOutline.selectedTreeElement.__dataGridNode.select(true);
</span><span class="cx">         else if (this._dataGrid.selectedNode)
</span><span class="cx">             this._dataGrid.selectedNode.deselect(true);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    treeElementForDataGridNode: function(dataGridNode)
</del><ins>+    treeElementForDataGridNode(dataGridNode)
</ins><span class="cx">     {
</span><span class="cx">         return dataGridNode.__treeElement || null;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    dataGridNodeForTreeElement: function(treeElement)
</del><ins>+    dataGridNodeForTreeElement(treeElement)
</ins><span class="cx">     {
</span><span class="cx">         if (treeElement.__dataGridNode)
</span><span class="cx">             return treeElement.__dataGridNode;
</span><span class="lines">@@ -154,11 +151,11 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         return null;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span><del>-    _treeOutlineScrolled: function(event)
</del><ins>+    _treeOutlineScrolled(event)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="lines">@@ -170,9 +167,9 @@
</span><span class="cx"> 
</span><span class="cx">         this._ignoreNextDataGridScrollEvent = true;
</span><span class="cx">         this._dataGrid.scrollContainer.scrollTop = this._treeOutline.element.parentNode.scrollTop;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _dataGridScrolled: function(event)
</del><ins>+    _dataGridScrolled(event)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="lines">@@ -184,9 +181,9 @@
</span><span class="cx"> 
</span><span class="cx">         this._ignoreNextTreeOutlineScrollEvent = true;
</span><span class="cx">         this._treeOutline.element.parentNode.scrollTop = this._dataGrid.scrollContainer.scrollTop;
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _dataGridNodeSelected: function(event)
</del><ins>+    _dataGridNodeSelected(event)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="lines">@@ -194,9 +191,9 @@
</span><span class="cx">         var dataGridNode = this._dataGrid.selectedNode;
</span><span class="cx">         if (dataGridNode)
</span><span class="cx">             dataGridNode.__treeElement.select(true, true, true, true);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _dataGridNodeExpanded: function(event)
</del><ins>+    _dataGridNodeExpanded(event)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="lines">@@ -206,9 +203,9 @@
</span><span class="cx"> 
</span><span class="cx">         if (!dataGridNode.__treeElement.expanded)
</span><span class="cx">             dataGridNode.__treeElement.expand();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _dataGridNodeCollapsed: function(event)
</del><ins>+    _dataGridNodeCollapsed(event)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="lines">@@ -218,9 +215,9 @@
</span><span class="cx"> 
</span><span class="cx">         if (dataGridNode.__treeElement.expanded)
</span><span class="cx">             dataGridNode.__treeElement.collapse();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _treeElementSelected: function(treeElement, selectedByUser)
</del><ins>+    _treeElementSelected(treeElement, selectedByUser)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="lines">@@ -229,9 +226,9 @@
</span><span class="cx">         console.assert(dataGridNode);
</span><span class="cx"> 
</span><span class="cx">         dataGridNode.select(true);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _treeElementAdded: function(treeElement)
</del><ins>+    _treeElementAdded(treeElement)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="lines">@@ -246,9 +243,9 @@
</span><span class="cx">         console.assert(childIndex !== -1);
</span><span class="cx"> 
</span><span class="cx">         parentDataGridNode.insertChild(dataGridNode, childIndex);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _treeElementRemoved: function(treeElement)
</del><ins>+    _treeElementRemoved(treeElement)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="lines">@@ -258,9 +255,9 @@
</span><span class="cx"> 
</span><span class="cx">         if (dataGridNode.parent)
</span><span class="cx">             dataGridNode.parent.removeChild(dataGridNode);
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _treeElementExpanded: function(treeElement)
</del><ins>+    _treeElementExpanded(treeElement)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="lines">@@ -270,9 +267,9 @@
</span><span class="cx"> 
</span><span class="cx">         if (!dataGridNode.expanded)
</span><span class="cx">             dataGridNode.expand();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _treeElementCollapsed: function(treeElement)
</del><ins>+    _treeElementCollapsed(treeElement)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="lines">@@ -282,9 +279,9 @@
</span><span class="cx"> 
</span><span class="cx">         if (dataGridNode.expanded)
</span><span class="cx">             dataGridNode.collapse();
</span><del>-    },
</del><ins>+    }
</ins><span class="cx"> 
</span><del>-    _treeElementHiddenChanged: function(treeElement, hidden)
</del><ins>+    _treeElementHiddenChanged(treeElement, hidden)
</ins><span class="cx">     {
</span><span class="cx">         if (!this._enabled)
</span><span class="cx">             return;
</span><span class="lines">@@ -295,5 +292,3 @@
</span><span class="cx">         dataGridNode.element.classList.toggle(&quot;hidden&quot;, hidden);
</span><span class="cx">     }
</span><span class="cx"> };
</span><del>-
-WebInspector.TreeOutlineDataGridSynchronizer.prototype.__proto__ = WebInspector.Object.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTypePropertiesSectionjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TypePropertiesSection.js (182041 => 182042)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TypePropertiesSection.js        2015-03-26 23:37:55 UTC (rev 182041)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TypePropertiesSection.js        2015-03-26 23:38:12 UTC (rev 182042)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2014 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
</ins><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="cx">  * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -68,7 +68,7 @@
</span><span class="cx">             var title = document.createElement(&quot;div&quot;);
</span><span class="cx">             title.className = &quot;info&quot;;
</span><span class="cx">             title.textContent = this.emptyPlaceholder;
</span><del>-            var infoElement = new TreeElement(title, null, false);
</del><ins>+            var infoElement = new WebInspector.TreeElement(title, null, false);
</ins><span class="cx">             this.propertiesTreeOutline.appendChild(infoElement);
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="lines">@@ -125,25 +125,23 @@
</span><span class="cx">     return diff;
</span><span class="cx"> };
</span><span class="cx"> 
</span><del>-WebInspector.TypePropertyTreeElement = function(property)
</del><ins>+WebInspector.TypePropertyTreeElement = class TypePropertyTreeElement extends WebInspector.TreeElement
</ins><span class="cx"> {
</span><del>-    this.property = property;
</del><ins>+    constructor(property)
+    {
+        super(this.nameElement, null, false);
</ins><span class="cx"> 
</span><del>-    this.nameElement = document.createElement(&quot;span&quot;);
-    this.nameElement.className = &quot;name&quot;;
-    this.nameElement.textContent = this.property.name;
</del><ins>+        this.property = property;
</ins><span class="cx"> 
</span><del>-    TreeElement.call(this, this.nameElement, null, false);
</del><ins>+        this.nameElement = document.createElement(&quot;span&quot;);
+        this.nameElement.className = &quot;name&quot;;
+        this.nameElement.textContent = this.property.name;
</ins><span class="cx"> 
</span><del>-    this.toggleOnClick = true;
-    this.hasChildren = !!this.property.structure;
-};
</del><ins>+        this.toggleOnClick = true;
+        this.hasChildren = !!this.property.structure;
+    }
</ins><span class="cx"> 
</span><del>-WebInspector.TypePropertyTreeElement.prototype = {
-    constructor: WebInspector.TypePropertyTreeElement,
-    __proto__: TreeElement.prototype,
-
-    onpopulate: function()
</del><ins>+    onpopulate()
</ins><span class="cx">     {
</span><span class="cx">         this.removeChildren();
</span><span class="cx"> 
</span><span class="lines">@@ -184,4 +182,3 @@
</span><span class="cx">             this.appendChild(new WebInspector.TypePropertyTreeElement(property));
</span><span class="cx">     }
</span><span class="cx"> };
</span><del>-
</del></span></pre>
</div>
</div>

</body>
</html>