<!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>[195303] 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/195303">195303</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2016-01-19 11:53:16 -0800 (Tue, 19 Jan 2016)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: cleanup TreeOutline class and separate styles from NavigationSidebarPanel
https://bugs.webkit.org/show_bug.cgi?id=153146
&lt;rdar://problem/24213071&gt;

Reviewed by Timothy Hatcher.

This patch consolidates and simplifies the tree outline styles that were previously
defined across various classes. A new stylesheet, TreeOutline.css, includes all
the styles needed to create a basic TreeOutline.

In addition, certain tree features which were previously controlled by manually
toggling class names have been promoted to properties of TreeOutline:
 - compact: tree elements have reduced vertical spacing. Used by object trees.
   The compact and large settings are mutually exclusive.
 - large: tree elements (and their icons) are large. Used by TimelinesSidebarPanel.
   Previously there existed a `small` class name which was enabled in every
   case except TimelineSidebarPanel's Timelines tree. Since it was the rule rather
   than the exception the class has been removed and is now the default style.
 - disclosureButtons: control the appearance of disclosure buttons.
 - customIndent: control use of generated style rules.

* UserInterface/Main.html:
New CSS file.

* UserInterface/Views/ApplicationCacheFrameTreeElement.js:
(WebInspector.ApplicationCacheFrameTreeElement): Deleted.
* UserInterface/Views/BreakpointTreeElement.js:
(WebInspector.BreakpointTreeElement): Deleted.
* UserInterface/Views/CallFrameTreeElement.js:
(WebInspector.CallFrameTreeElement): Deleted.
* UserInterface/Views/ContentFlowTreeElement.js:
(WebInspector.ContentFlowTreeElement): Deleted.
Removed call to obsolete TreeOutline.prototype.small setter.

* UserInterface/Views/DOMTreeOutline.css:
(.tree-outline.dom):
(.tree-outline.dom li.hovered:not(.selected) .selection):
(.tree-outline.dom li .selection):
(.tree-outline.dom li.selected .selection):
(.tree-outline.dom li.elements-drag-over .selection):
(.tree-outline.dom:focus li.selected .selection):
(.tree-outline.dom li.selected &gt; span::after):
(.tree-outline.dom:focus li.selected &gt; span::after):
(.tree-outline.dom ol):
(.tree-outline.dom ol.children):
(.tree-outline.dom ol.children.expanded):
(.tree-outline.dom li):
(.tree-outline.dom li.pseudo-class-enabled &gt; .selection::before):
(.tree-outline.dom.single-node li):
(.tree-outline.dom:focus li.selected):
(.tree-outline.dom:focus li.selected.pseudo-class-enabled &gt; .selection::before):
(.tree-outline.dom:focus li.selected *):
(.tree-outline.dom li.parent):
(.tree-outline.dom li .html-tag.close):
(.tree-outline.dom li.parent::before):
(.tree-outline.dom:focus li.parent.selected::before):
(.tree-outline.dom li.parent.expanded::before):
(.tree-outline.dom:focus li.parent.expanded.selected::before):
(.tree-outline.dom .html-text-node.large):
(.tree-outline.dom .html-pseudo-element):
(.tree-outline.dom .html-fragment.shadow):
(.showing-find-banner .tree-outline.dom .search-highlight):
(.dom-tree-outline): Deleted.
(.dom-tree-outline li.hovered:not(.selected) .selection): Deleted.
(.dom-tree-outline li .selection): Deleted.
(.dom-tree-outline li.selected .selection): Deleted.
(.dom-tree-outline li.elements-drag-over .selection): Deleted.
(.dom-tree-outline:focus li.selected .selection): Deleted.
(.dom-tree-outline li.selected &gt; span::after): Deleted.
(.dom-tree-outline:focus li.selected &gt; span::after): Deleted.
(.dom-tree-outline ol): Deleted.
(.dom-tree-outline ol.children): Deleted.
(.dom-tree-outline ol.children.expanded): Deleted.
(.dom-tree-outline li): Deleted.
(.dom-tree-outline li.pseudo-class-enabled &gt; .selection::before): Deleted.
(.dom-tree-outline.single-node li): Deleted.
(.dom-tree-outline:focus li.selected): Deleted.
(.dom-tree-outline:focus li.selected.pseudo-class-enabled &gt; .selection::before): Deleted.
(.dom-tree-outline:focus li.selected *): Deleted.
(.dom-tree-outline li.parent): Deleted.
(.dom-tree-outline li .html-tag.close): Deleted.
(.dom-tree-outline li.parent::before): Deleted.
(.dom-tree-outline:focus li.parent.selected::before): Deleted.
(.dom-tree-outline li.parent.expanded::before): Deleted.
(.dom-tree-outline:focus li.parent.expanded.selected::before): Deleted.
(.dom-tree-outline .html-text-node.large): Deleted.
(.dom-tree-outline .html-pseudo-element): Deleted.
(.dom-tree-outline .html-fragment.shadow): Deleted.
(.showing-find-banner .dom-tree-outline .search-highlight): Deleted.
Updated selectors with new tree outline class names.

* UserInterface/Views/DOMTreeOutline.js:
(WebInspector.DOMTreeOutline):
Use default TreeOutline DOM element, and simplify element class name.

* UserInterface/Views/DatabaseTableTreeElement.js:
(WebInspector.DatabaseTableTreeElement): Deleted.
* UserInterface/Views/DatabaseTreeElement.js:
(WebInspector.DatabaseTreeElement): Deleted.
Removed call to obsolete TreeOutline.prototype.small setter.

* UserInterface/Views/ErrorObjectView.css:
(.error-object:not(.expanded) .tree-outline):
(.error-object .tree-outline):
(.error-object:not(.expanded) .error-object-outline): Deleted.
(.error-object-outline): Deleted.
Updated selectors with new tree outline class names.

* UserInterface/Views/ErrorObjectView.js:
(WebInspector.ErrorObjectView): Deleted.
Removed unused tree outline class name.

* UserInterface/Views/FolderTreeElement.js:
(WebInspector.FolderTreeElement): Deleted.
Removed call to obsolete TreeOutline.prototype.small setter.

* UserInterface/Views/FormattedValue.css:
(.formatted-node &gt; .tree-outline.dom):
(.formatted-node &gt; .tree-outline.dom ol):
(.formatted-node &gt; .tree-outline.dom li):
(.formatted-node &gt; .tree-outline.dom li.hovered:not(.selected) .selection):
(.formatted-node &gt; .dom-tree-outline): Deleted.
(.formatted-node &gt; .dom-tree-outline ol): Deleted.
(.formatted-node &gt; .dom-tree-outline li): Deleted.
(.formatted-node &gt; .dom-tree-outline li.hovered:not(.selected) .selection): Deleted.
Updated selectors with new tree outline class names.

* UserInterface/Views/GeneralTreeElement.js:
(WebInspector.GeneralTreeElement.prototype._updateTitleTooltip):
(WebInspector.GeneralTreeElement.prototype.get small): Deleted.
(WebInspector.GeneralTreeElement.prototype.set small): Deleted.
(WebInspector.GeneralTreeElement.prototype.get twoLine): Deleted.
(WebInspector.GeneralTreeElement.prototype.set twoLine): Deleted.
Removed properties `small` and `twoLine`. The first is no longer needed as
it is now the default tree element style. The second was not being used.

* UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js:
(WebInspector.IndexedDatabaseObjectStoreIndexTreeElement): Deleted.
* UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js:
(WebInspector.IndexedDatabaseObjectStoreTreeElement): Deleted.
* UserInterface/Views/IndexedDatabaseTreeElement.js:
(WebInspector.IndexedDatabaseTreeElement): Deleted.
Removed call to obsolete TreeOutline.prototype.small setter.

* UserInterface/Views/IssueTreeElement.css:
(.navigation-sidebar-panel-content-tree-outline .item.small.issue .icon): Deleted.
No longer needed.

* UserInterface/Views/IssueTreeElement.js:
(WebInspector.IssueTreeElement): Deleted.
Removed call to obsolete TreeOutline.prototype.small setter.

* UserInterface/Views/LayoutTimelineView.css:
(.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.layout .item .subtitle):
(.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.layout .item .subtitle): Deleted.
Updated selectors with new tree outline class names.

* UserInterface/Views/LogTreeElement.js:
(WebInspector.LogTreeElement): Deleted.
Removed call to obsolete TreeOutline.prototype.small setter.

* UserInterface/Views/NavigationSidebarPanel.css:
(.navigation-sidebar-panel-content-tree-outline .children): Deleted.
(.navigation-sidebar-panel-content-tree-outline .children.expanded): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item): Deleted.
(.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons &gt; .children): Deleted.
(.navigation-sidebar-panel-content-tree-outline &gt; .children.hide-disclosure-buttons &gt; .children): Deleted.
(.navigation-sidebar-panel-content-tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) .icon): Deleted.
(.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons .item.small): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item .disclosure-button): Deleted.
(.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons .item .disclosure-button): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.parent .disclosure-button): Deleted.
(.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .disclosure-button): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.expanded .disclosure-button): Deleted.
(.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected.expanded .disclosure-button): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item .icon): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item .status): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item .status:empty): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.selected): Deleted.
(.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected): Deleted.
(body.window-inactive .navigation-sidebar-panel-content-tree-outline .item.selected): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item .titles): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item .highlighted): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item .titles.no-subtitle): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item .title::after): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item .subtitle): Deleted.
(.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .subtitle): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item .subtitle:empty): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.small): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.small.two-line): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.small .icon): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.small .status): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.small .status .indeterminate-progress-spinner): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.small .titles): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.small.two-line .status): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles.no-subtitle): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.small .subtitle): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.small.two-line .icon): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .title::after): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .subtitle::before): Deleted.
Generic tree outline styles removed, cleaned up, and relocated to TreeOutline.css.

* UserInterface/Views/NavigationSidebarPanel.js:
Removed static property HideDisclosureButtonsStyleClassName, which is now
encapsulated by TreeOutline.
(WebInspector.NavigationSidebarPanel.prototype.createContentTreeOutline):
Use default TreeOutline DOM element instead of creating it.
(WebInspector.NavigationSidebarPanel): Deleted.
Remove call to generate style rules.
(WebInspector.NavigationSidebarPanel.prototype._generateStyleRulesIfNeeded): Deleted.
Moved to TreeOutline.js.

* UserInterface/Views/NetworkSidebarPanel.css:
(.sidebar &gt; .panel.navigation.network.network-grid-content-view-showing .tree-outline.network-grid .item .subtitle):
(.sidebar &gt; .panel.navigation.network &gt; .content &gt; .tree-outline):
(.sidebar &gt; .panel.navigation.network.network-grid-content-view-showing &gt; .content &gt; .tree-outline):
(.sidebar &gt; .panel.navigation.network.network-grid-content-view-showing .navigation-sidebar-panel-content-tree-outline.network-grid .item .subtitle): Deleted.
(.sidebar &gt; .panel.navigation.network &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline): Deleted.
(.sidebar &gt; .panel.navigation.network.network-grid-content-view-showing &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline): Deleted.
Updated selectors with new tree outline class names.

* UserInterface/Views/NetworkSidebarPanel.js:
(WebInspector.NetworkSidebarPanel):
Disable tree outline disclosure buttons.

* UserInterface/Views/NetworkTimelineView.css:
(.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.network .item .subtitle):
(.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.network .item .subtitle): Deleted.
Updated selectors with new tree outline class names.

* UserInterface/Views/NetworkTimelineView.js:
(WebInspector.NetworkTimelineView):
Disable tree outline disclosure buttons.

* UserInterface/Views/ObjectTreeArrayIndexTreeElement.css:
(.object-tree-array-index .index-value .object-tree .tree-outline.object):
(.object-tree-array-index .index-value .formatted-node .tree-outline.dom):
(.object-tree-array-index .index-value .object-tree .object-tree-outline): Deleted.
(.object-tree-array-index .index-value .formatted-node .dom-tree-outline): Deleted.
Updated selectors with new tree outline class names.

* UserInterface/Views/ObjectTreeBaseTreeElement.js:
(WebInspector.ObjectTreeBaseTreeElement): Deleted.
Removed call to obsolete TreeOutline.prototype.small setter.

* UserInterface/Views/ObjectTreePropertyTreeElement.css:
(.tree-outline .item.object-tree-property):
(.item.object-tree-property.prototype-property):
(.item.object-tree-property.prototype-property + ol):
(.object-tree-property): Deleted.
(.object-tree-property &gt; .titles): Deleted.
(.object-tree-property &gt; .disclosure-button): Deleted.
(.object-tree-property.parent &gt; .disclosure-button): Deleted.
(.object-tree-property.parent.expanded &gt; .disclosure-button): Deleted.
(.object-tree-property &gt; .icon): Deleted.
(.object-tree-property.prototype-property): Deleted.
(.object-tree-property.prototype-property + ol): Deleted.
Updated selectors with new tree outline class names, removed styles which
are now provided by TreeOutline.css.

* UserInterface/Views/ObjectTreeView.css:
(.object-tree .tree-outline.object):
(.object-tree.expanded &gt; .tree-outline.object):
(.tree-outline.object):
(.object-tree.properties-only .tree-outline.object):
(.tree-outline.object li):
(.tree-outline.object ol):
(.tree-outline.object ol.expanded):
(.tree-outline.object li .empty-message):
(.object-tree .object-tree-outline): Deleted.
(.object-tree.expanded &gt; .object-tree-outline): Deleted.
(.object-tree-outline): Deleted.
(.object-tree.properties-only .object-tree-outline): Deleted.
(.object-tree-outline li): Deleted.
(.object-tree-outline ol): Deleted.
(.object-tree-outline ol.expanded): Deleted.
(.object-tree-outline li .empty-message): Deleted.
Updated selectors with new tree outline class names.

* UserInterface/Views/ObjectTreeView.js:
(WebInspector.ObjectTreeView):
Use default TreeOutline DOM element, and simplify element class name.
Enable custom indent (disables generated style rules).

* UserInterface/Views/ProfileNodeTreeElement.js:
(WebInspector.ProfileNodeTreeElement): Deleted.
Removed call to obsolete TreeOutline.prototype.small setter.

* UserInterface/Views/RenderingFrameTimelineView.css:
(.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.rendering-frame .item:not(.paint-record):not(.layout-record) .subtitle):
(.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.rendering-frame .item:not(.paint-record):not(.layout-record) .subtitle): Deleted.
Updated selectors with new tree outline class names.

* UserInterface/Views/ResourceSidebarPanel.js:
(WebInspector.ResourceSidebarPanel):
Disable tree outline disclosure buttons.
(WebInspector.ResourceSidebarPanel.prototype._extraDomainsActivated):
Enable tree outline disclosure buttons.

* UserInterface/Views/ScriptTimelineView.css:
(.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.script .item .subtitle):
(.sidebar &gt; .panel.navigation.timeline:not(.timeline-recording-content-view-showing) .tree-outline.script .item .alternate-subtitle):
(.tree-outline .item .alternate-subtitle):
(.tree-outline:matches(:focus, .force-focus) .item.selected .alternate-subtitle):
(.tree-outline .item.small:not(.two-line) .alternate-subtitle::before):
(.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle): Deleted.
(.sidebar &gt; .panel.navigation.timeline:not(.timeline-recording-content-view-showing) .navigation-sidebar-panel-content-tree-outline.script .item .alternate-subtitle): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item .alternate-subtitle): Deleted.
(.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .alternate-subtitle): Deleted.
(.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .alternate-subtitle::before): Deleted.
Updated selectors with new tree outline class names.

* UserInterface/Views/SearchResultTreeElement.js:
(WebInspector.SearchResultTreeElement): Deleted.
* UserInterface/Views/SourceCodeTreeElement.js:
(WebInspector.SourceCodeTreeElement): Deleted.
* UserInterface/Views/StorageTreeElement.js:
(WebInspector.StorageTreeElement): Deleted.
Removed call to obsolete TreeOutline.prototype.small setter.

* UserInterface/Views/TimelineDataGrid.css:
(.tree-outline.timeline-data-grid .item:hover):
(.tree-outline.timeline-data-grid .item:hover .subtitle):
(.timeline-data-grid-tree-outline): Deleted.
(.timeline-data-grid-tree-outline .item): Deleted.
(.timeline-data-grid-tree-outline .item .status): Deleted.
(.timeline-data-grid-tree-outline .item .icon): Deleted.
(.timeline-data-grid-tree-outline .item:hover): Deleted.
(.timeline-data-grid-tree-outline .item .titles): Deleted.
(.timeline-data-grid-tree-outline .item .title::after): Deleted.
(.timeline-data-grid-tree-outline .item .subtitle): Deleted.
(.timeline-data-grid-tree-outline .item:hover .subtitle): Deleted.
(.timeline-data-grid-tree-outline .item .subtitle:empty): Deleted.
(.timeline-data-grid-tree-outline .item.small): Deleted.
(.timeline-data-grid-tree-outline .item.small .icon): Deleted.
(.timeline-data-grid-tree-outline .item.small .status): Deleted.
(.timeline-data-grid-tree-outline .item.small .titles): Deleted.
(.timeline-data-grid-tree-outline .item.small .subtitle): Deleted.
(.timeline-data-grid-tree-outline .item.small:not(.two-line) .title::after): Deleted.
(.timeline-data-grid-tree-outline .item.small:not(.two-line) .subtitle::before): Deleted.
Updated selectors with new tree outline class names, removed styles which
are now provided by TreeOutline.css.

* UserInterface/Views/TimelineDataGrid.js:
(WebInspector.TimelineDataGrid.prototype._createPopoverContent):
Use default TreeOutline DOM element, and simplify element class name.

* UserInterface/Views/TimelineRecordTreeElement.js:
(WebInspector.TimelineRecordTreeElement): Deleted.
Removed call to obsolete TreeOutline.prototype.small setter.

* UserInterface/Views/TimelineSidebarPanel.css:
(.sidebar &gt; .panel.navigation.timeline &gt; .timelines-content .close-button): Deleted.
Removed styles which are now provided by TreeOutline.css.

* UserInterface/Views/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel):
Disable tree outline disclosure buttons, enable large tree style.

* UserInterface/Views/TimelineView.css:
(.panel.navigation.timeline &gt; .content &gt; .tree-outline):
(.panel.navigation.timeline.timeline-recording-content-view-showing &gt; .content &gt; .tree-outline):
(.panel.navigation.timeline &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline): Deleted.
(.panel.navigation.timeline.timeline-recording-content-view-showing &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline): Deleted.
Updated selectors with new tree outline class names.

* UserInterface/Views/TreeOutline.css: Added.
(.tree-outline .children):
(.tree-outline .children.expanded):
(.tree-outline .item):
(.tree-outline.compact .item):
(.tree-outline.large .item):
(.tree-outline.hide-disclosure-buttons &gt; .children):
(.tree-outline &gt; .children.hide-disclosure-buttons &gt; .children):
(.tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) .icon):
(.tree-outline .item .disclosure-button):
(.tree-outline.hide-disclosure-buttons .item .disclosure-button):
(.tree-outline .item.parent .disclosure-button):
(.tree-outline:matches(:focus, .force-focus) .item.selected .disclosure-button):
(.tree-outline .item.expanded .disclosure-button):
(.tree-outline:matches(:focus, .force-focus) .item.selected.expanded .disclosure-button):
(.tree-outline .item .icon):
(.tree-outline.compact .item .icon):
(.tree-outline.large .item .icon):
(.tree-outline .item .status):
(.tree-outline.large .item .status):
(.tree-outline .item .status:empty):
(.tree-outline .item.selected):
(.tree-outline:matches(:focus, .force-focus) .item.selected):
(body.window-inactive .tree-outline .item.selected):
(.tree-outline .item .titles):
(.tree-outline.compact .item .titles):
(.tree-outline.large .item .titles):
(.tree-outline .item .highlighted):
(.tree-outline.large .item .titles.no-subtitle):
(.tree-outline .item .title::after):
(.tree-outline .item .subtitle):
(.tree-outline.large .item .subtitle):
(.tree-outline:matches(:focus, .force-focus) .item.selected .subtitle):
(.tree-outline .item .subtitle:empty):
(.tree-outline:not(.large) .item .status .indeterminate-progress-spinner):
(.tree-outline .item .subtitle::before):
Relocated tree outlines styles from NavigationSidebarPanel.css.

* UserInterface/Views/TreeOutline.js:
(WebInspector.TreeOutline):
(WebInspector.TreeOutline.prototype.get compact):
(WebInspector.TreeOutline.prototype.set compact):
(WebInspector.TreeOutline.prototype.get large):
(WebInspector.TreeOutline.prototype.set large):
(WebInspector.TreeOutline.prototype.get disclosureButtons):
(WebInspector.TreeOutline.prototype.set disclosureButtons):
(WebInspector.TreeOutline.prototype.get customIndent):
(WebInspector.TreeOutline.prototype.set customIndent):
Added properties for tree element appearance and indentation
behavior, so clients don't need to manually toggle style classes.
(WebInspector.TreeOutline._generateStyleRulesIfNeeded):
Relocated from NavigationSidebarPanel.js.

* UserInterface/Views/TypeTreeElement.js:
(WebInspector.TypeTreeElement): Deleted.
Removed call to obsolete TreeOutline.prototype.small setter.

* UserInterface/Views/TypeTreeView.css:
(.tree-outline.type):
(.tree-outline.type li):
(.tree-outline.type ol):
(.tree-outline.type ol.expanded):
(.tree-outline.type li .empty-message):
(.type-tree-outline): Deleted.
(.type-tree-outline li): Deleted.
(.type-tree-outline ol): Deleted.
(.type-tree-outline ol.expanded): Deleted.
(.type-tree-outline li .empty-message): Deleted.
Updated selectors with new tree outline class names.

* UserInterface/Views/TypeTreeView.js:
(WebInspector.TypeTreeView):
Use default TreeOutline DOM element, and simplify element class name.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsApplicationCacheFrameTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.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="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinecss">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinejs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.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="#trunkSourceWebInspectorUIUserInterfaceViewsErrorObjectViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsErrorObjectViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFolderTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFormattedValuecss">trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsGeneralTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.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="#trunkSourceWebInspectorUIUserInterfaceViewsIssueTreeElementcss">trunk/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsIssueTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLogTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeArrayIndexTreeElementcss">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeBaseTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectTreePropertyTreeElementcss">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css</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="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsScriptTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSearchResultTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSourceCodeTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsStorageTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineDataGridcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css</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="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinejs">trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTypeTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTypeTreeViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTypeTreeViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.js</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinecss">trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/ChangeLog        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -1,3 +1,446 @@
</span><ins>+2016-01-19  Matt Baker  &lt;mattbaker@apple.com&gt;
+
+        Web Inspector: cleanup TreeOutline class and separate styles from NavigationSidebarPanel
+        https://bugs.webkit.org/show_bug.cgi?id=153146
+        &lt;rdar://problem/24213071&gt;
+
+        Reviewed by Timothy Hatcher.
+
+        This patch consolidates and simplifies the tree outline styles that were previously
+        defined across various classes. A new stylesheet, TreeOutline.css, includes all
+        the styles needed to create a basic TreeOutline.
+
+        In addition, certain tree features which were previously controlled by manually
+        toggling class names have been promoted to properties of TreeOutline:
+         - compact: tree elements have reduced vertical spacing. Used by object trees.
+           The compact and large settings are mutually exclusive.
+         - large: tree elements (and their icons) are large. Used by TimelinesSidebarPanel.
+           Previously there existed a `small` class name which was enabled in every
+           case except TimelineSidebarPanel's Timelines tree. Since it was the rule rather
+           than the exception the class has been removed and is now the default style.
+         - disclosureButtons: control the appearance of disclosure buttons.
+         - customIndent: control use of generated style rules.
+
+        * UserInterface/Main.html:
+        New CSS file.
+
+        * UserInterface/Views/ApplicationCacheFrameTreeElement.js:
+        (WebInspector.ApplicationCacheFrameTreeElement): Deleted.
+        * UserInterface/Views/BreakpointTreeElement.js:
+        (WebInspector.BreakpointTreeElement): Deleted.
+        * UserInterface/Views/CallFrameTreeElement.js:
+        (WebInspector.CallFrameTreeElement): Deleted.
+        * UserInterface/Views/ContentFlowTreeElement.js:
+        (WebInspector.ContentFlowTreeElement): Deleted.
+        Removed call to obsolete TreeOutline.prototype.small setter.
+
+        * UserInterface/Views/DOMTreeOutline.css:
+        (.tree-outline.dom):
+        (.tree-outline.dom li.hovered:not(.selected) .selection):
+        (.tree-outline.dom li .selection):
+        (.tree-outline.dom li.selected .selection):
+        (.tree-outline.dom li.elements-drag-over .selection):
+        (.tree-outline.dom:focus li.selected .selection):
+        (.tree-outline.dom li.selected &gt; span::after):
+        (.tree-outline.dom:focus li.selected &gt; span::after):
+        (.tree-outline.dom ol):
+        (.tree-outline.dom ol.children):
+        (.tree-outline.dom ol.children.expanded):
+        (.tree-outline.dom li):
+        (.tree-outline.dom li.pseudo-class-enabled &gt; .selection::before):
+        (.tree-outline.dom.single-node li):
+        (.tree-outline.dom:focus li.selected):
+        (.tree-outline.dom:focus li.selected.pseudo-class-enabled &gt; .selection::before):
+        (.tree-outline.dom:focus li.selected *):
+        (.tree-outline.dom li.parent):
+        (.tree-outline.dom li .html-tag.close):
+        (.tree-outline.dom li.parent::before):
+        (.tree-outline.dom:focus li.parent.selected::before):
+        (.tree-outline.dom li.parent.expanded::before):
+        (.tree-outline.dom:focus li.parent.expanded.selected::before):
+        (.tree-outline.dom .html-text-node.large):
+        (.tree-outline.dom .html-pseudo-element):
+        (.tree-outline.dom .html-fragment.shadow):
+        (.showing-find-banner .tree-outline.dom .search-highlight):
+        (.dom-tree-outline): Deleted.
+        (.dom-tree-outline li.hovered:not(.selected) .selection): Deleted.
+        (.dom-tree-outline li .selection): Deleted.
+        (.dom-tree-outline li.selected .selection): Deleted.
+        (.dom-tree-outline li.elements-drag-over .selection): Deleted.
+        (.dom-tree-outline:focus li.selected .selection): Deleted.
+        (.dom-tree-outline li.selected &gt; span::after): Deleted.
+        (.dom-tree-outline:focus li.selected &gt; span::after): Deleted.
+        (.dom-tree-outline ol): Deleted.
+        (.dom-tree-outline ol.children): Deleted.
+        (.dom-tree-outline ol.children.expanded): Deleted.
+        (.dom-tree-outline li): Deleted.
+        (.dom-tree-outline li.pseudo-class-enabled &gt; .selection::before): Deleted.
+        (.dom-tree-outline.single-node li): Deleted.
+        (.dom-tree-outline:focus li.selected): Deleted.
+        (.dom-tree-outline:focus li.selected.pseudo-class-enabled &gt; .selection::before): Deleted.
+        (.dom-tree-outline:focus li.selected *): Deleted.
+        (.dom-tree-outline li.parent): Deleted.
+        (.dom-tree-outline li .html-tag.close): Deleted.
+        (.dom-tree-outline li.parent::before): Deleted.
+        (.dom-tree-outline:focus li.parent.selected::before): Deleted.
+        (.dom-tree-outline li.parent.expanded::before): Deleted.
+        (.dom-tree-outline:focus li.parent.expanded.selected::before): Deleted.
+        (.dom-tree-outline .html-text-node.large): Deleted.
+        (.dom-tree-outline .html-pseudo-element): Deleted.
+        (.dom-tree-outline .html-fragment.shadow): Deleted.
+        (.showing-find-banner .dom-tree-outline .search-highlight): Deleted.
+        Updated selectors with new tree outline class names.
+
+        * UserInterface/Views/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline):
+        Use default TreeOutline DOM element, and simplify element class name.
+
+        * UserInterface/Views/DatabaseTableTreeElement.js:
+        (WebInspector.DatabaseTableTreeElement): Deleted.
+        * UserInterface/Views/DatabaseTreeElement.js:
+        (WebInspector.DatabaseTreeElement): Deleted.
+        Removed call to obsolete TreeOutline.prototype.small setter.
+
+        * UserInterface/Views/ErrorObjectView.css:
+        (.error-object:not(.expanded) .tree-outline):
+        (.error-object .tree-outline):
+        (.error-object:not(.expanded) .error-object-outline): Deleted.
+        (.error-object-outline): Deleted.
+        Updated selectors with new tree outline class names.
+
+        * UserInterface/Views/ErrorObjectView.js:
+        (WebInspector.ErrorObjectView): Deleted.
+        Removed unused tree outline class name.
+
+        * UserInterface/Views/FolderTreeElement.js:
+        (WebInspector.FolderTreeElement): Deleted.
+        Removed call to obsolete TreeOutline.prototype.small setter.
+
+        * UserInterface/Views/FormattedValue.css:
+        (.formatted-node &gt; .tree-outline.dom):
+        (.formatted-node &gt; .tree-outline.dom ol):
+        (.formatted-node &gt; .tree-outline.dom li):
+        (.formatted-node &gt; .tree-outline.dom li.hovered:not(.selected) .selection):
+        (.formatted-node &gt; .dom-tree-outline): Deleted.
+        (.formatted-node &gt; .dom-tree-outline ol): Deleted.
+        (.formatted-node &gt; .dom-tree-outline li): Deleted.
+        (.formatted-node &gt; .dom-tree-outline li.hovered:not(.selected) .selection): Deleted.
+        Updated selectors with new tree outline class names.
+
+        * UserInterface/Views/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement.prototype._updateTitleTooltip):
+        (WebInspector.GeneralTreeElement.prototype.get small): Deleted.
+        (WebInspector.GeneralTreeElement.prototype.set small): Deleted.
+        (WebInspector.GeneralTreeElement.prototype.get twoLine): Deleted.
+        (WebInspector.GeneralTreeElement.prototype.set twoLine): Deleted.
+        Removed properties `small` and `twoLine`. The first is no longer needed as
+        it is now the default tree element style. The second was not being used.
+
+        * UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js:
+        (WebInspector.IndexedDatabaseObjectStoreIndexTreeElement): Deleted.
+        * UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js:
+        (WebInspector.IndexedDatabaseObjectStoreTreeElement): Deleted.
+        * UserInterface/Views/IndexedDatabaseTreeElement.js:
+        (WebInspector.IndexedDatabaseTreeElement): Deleted.
+        Removed call to obsolete TreeOutline.prototype.small setter.
+
+        * UserInterface/Views/IssueTreeElement.css:
+        (.navigation-sidebar-panel-content-tree-outline .item.small.issue .icon): Deleted.
+        No longer needed.
+
+        * UserInterface/Views/IssueTreeElement.js:
+        (WebInspector.IssueTreeElement): Deleted.
+        Removed call to obsolete TreeOutline.prototype.small setter.
+
+        * UserInterface/Views/LayoutTimelineView.css:
+        (.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.layout .item .subtitle):
+        (.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.layout .item .subtitle): Deleted.
+        Updated selectors with new tree outline class names.
+
+        * UserInterface/Views/LogTreeElement.js:
+        (WebInspector.LogTreeElement): Deleted.
+        Removed call to obsolete TreeOutline.prototype.small setter.
+
+        * UserInterface/Views/NavigationSidebarPanel.css:
+        (.navigation-sidebar-panel-content-tree-outline .children): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .children.expanded): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons &gt; .children): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline &gt; .children.hide-disclosure-buttons &gt; .children): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) .icon): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons .item.small): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item .disclosure-button): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons .item .disclosure-button): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.parent .disclosure-button): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .disclosure-button): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.expanded .disclosure-button): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected.expanded .disclosure-button): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item .icon): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item .status): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item .status:empty): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.selected): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected): Deleted.
+        (body.window-inactive .navigation-sidebar-panel-content-tree-outline .item.selected): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item .titles): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item .highlighted): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item .titles.no-subtitle): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item .title::after): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item .subtitle): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .subtitle): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item .subtitle:empty): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.small): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.small.two-line): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.small .icon): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.small .status): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.small .status .indeterminate-progress-spinner): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.small .titles): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.small.two-line .status): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles.no-subtitle): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.small .subtitle): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.small.two-line .icon): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .title::after): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .subtitle::before): Deleted.
+        Generic tree outline styles removed, cleaned up, and relocated to TreeOutline.css.
+
+        * UserInterface/Views/NavigationSidebarPanel.js:
+        Removed static property HideDisclosureButtonsStyleClassName, which is now
+        encapsulated by TreeOutline.
+        (WebInspector.NavigationSidebarPanel.prototype.createContentTreeOutline):
+        Use default TreeOutline DOM element instead of creating it.
+        (WebInspector.NavigationSidebarPanel): Deleted.
+        Remove call to generate style rules.
+        (WebInspector.NavigationSidebarPanel.prototype._generateStyleRulesIfNeeded): Deleted.
+        Moved to TreeOutline.js.
+
+        * UserInterface/Views/NetworkSidebarPanel.css:
+        (.sidebar &gt; .panel.navigation.network.network-grid-content-view-showing .tree-outline.network-grid .item .subtitle):
+        (.sidebar &gt; .panel.navigation.network &gt; .content &gt; .tree-outline):
+        (.sidebar &gt; .panel.navigation.network.network-grid-content-view-showing &gt; .content &gt; .tree-outline):
+        (.sidebar &gt; .panel.navigation.network.network-grid-content-view-showing .navigation-sidebar-panel-content-tree-outline.network-grid .item .subtitle): Deleted.
+        (.sidebar &gt; .panel.navigation.network &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline): Deleted.
+        (.sidebar &gt; .panel.navigation.network.network-grid-content-view-showing &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline): Deleted.
+        Updated selectors with new tree outline class names.
+
+        * UserInterface/Views/NetworkSidebarPanel.js:
+        (WebInspector.NetworkSidebarPanel):
+        Disable tree outline disclosure buttons.
+
+        * UserInterface/Views/NetworkTimelineView.css:
+        (.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.network .item .subtitle):
+        (.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.network .item .subtitle): Deleted.
+        Updated selectors with new tree outline class names.
+
+        * UserInterface/Views/NetworkTimelineView.js:
+        (WebInspector.NetworkTimelineView):
+        Disable tree outline disclosure buttons.
+
+        * UserInterface/Views/ObjectTreeArrayIndexTreeElement.css:
+        (.object-tree-array-index .index-value .object-tree .tree-outline.object):
+        (.object-tree-array-index .index-value .formatted-node .tree-outline.dom):
+        (.object-tree-array-index .index-value .object-tree .object-tree-outline): Deleted.
+        (.object-tree-array-index .index-value .formatted-node .dom-tree-outline): Deleted.
+        Updated selectors with new tree outline class names.
+
+        * UserInterface/Views/ObjectTreeBaseTreeElement.js:
+        (WebInspector.ObjectTreeBaseTreeElement): Deleted.
+        Removed call to obsolete TreeOutline.prototype.small setter.
+
+        * UserInterface/Views/ObjectTreePropertyTreeElement.css:
+        (.tree-outline .item.object-tree-property):
+        (.item.object-tree-property.prototype-property):
+        (.item.object-tree-property.prototype-property + ol):
+        (.object-tree-property): Deleted.
+        (.object-tree-property &gt; .titles): Deleted.
+        (.object-tree-property &gt; .disclosure-button): Deleted.
+        (.object-tree-property.parent &gt; .disclosure-button): Deleted.
+        (.object-tree-property.parent.expanded &gt; .disclosure-button): Deleted.
+        (.object-tree-property &gt; .icon): Deleted.
+        (.object-tree-property.prototype-property): Deleted.
+        (.object-tree-property.prototype-property + ol): Deleted.
+        Updated selectors with new tree outline class names, removed styles which
+        are now provided by TreeOutline.css.
+
+        * UserInterface/Views/ObjectTreeView.css:
+        (.object-tree .tree-outline.object):
+        (.object-tree.expanded &gt; .tree-outline.object):
+        (.tree-outline.object):
+        (.object-tree.properties-only .tree-outline.object):
+        (.tree-outline.object li):
+        (.tree-outline.object ol):
+        (.tree-outline.object ol.expanded):
+        (.tree-outline.object li .empty-message):
+        (.object-tree .object-tree-outline): Deleted.
+        (.object-tree.expanded &gt; .object-tree-outline): Deleted.
+        (.object-tree-outline): Deleted.
+        (.object-tree.properties-only .object-tree-outline): Deleted.
+        (.object-tree-outline li): Deleted.
+        (.object-tree-outline ol): Deleted.
+        (.object-tree-outline ol.expanded): Deleted.
+        (.object-tree-outline li .empty-message): Deleted.
+        Updated selectors with new tree outline class names.
+
+        * UserInterface/Views/ObjectTreeView.js:
+        (WebInspector.ObjectTreeView):
+        Use default TreeOutline DOM element, and simplify element class name.
+        Enable custom indent (disables generated style rules).
+
+        * UserInterface/Views/ProfileNodeTreeElement.js:
+        (WebInspector.ProfileNodeTreeElement): Deleted.
+        Removed call to obsolete TreeOutline.prototype.small setter.
+
+        * UserInterface/Views/RenderingFrameTimelineView.css:
+        (.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.rendering-frame .item:not(.paint-record):not(.layout-record) .subtitle):
+        (.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.rendering-frame .item:not(.paint-record):not(.layout-record) .subtitle): Deleted.
+        Updated selectors with new tree outline class names.
+
+        * UserInterface/Views/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel):
+        Disable tree outline disclosure buttons.
+        (WebInspector.ResourceSidebarPanel.prototype._extraDomainsActivated):
+        Enable tree outline disclosure buttons.
+
+        * UserInterface/Views/ScriptTimelineView.css:
+        (.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.script .item .subtitle):
+        (.sidebar &gt; .panel.navigation.timeline:not(.timeline-recording-content-view-showing) .tree-outline.script .item .alternate-subtitle):
+        (.tree-outline .item .alternate-subtitle):
+        (.tree-outline:matches(:focus, .force-focus) .item.selected .alternate-subtitle):
+        (.tree-outline .item.small:not(.two-line) .alternate-subtitle::before):
+        (.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle): Deleted.
+        (.sidebar &gt; .panel.navigation.timeline:not(.timeline-recording-content-view-showing) .navigation-sidebar-panel-content-tree-outline.script .item .alternate-subtitle): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item .alternate-subtitle): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .alternate-subtitle): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .alternate-subtitle::before): Deleted.
+        Updated selectors with new tree outline class names.
+
+        * UserInterface/Views/SearchResultTreeElement.js:
+        (WebInspector.SearchResultTreeElement): Deleted.
+        * UserInterface/Views/SourceCodeTreeElement.js:
+        (WebInspector.SourceCodeTreeElement): Deleted.
+        * UserInterface/Views/StorageTreeElement.js:
+        (WebInspector.StorageTreeElement): Deleted.
+        Removed call to obsolete TreeOutline.prototype.small setter.
+
+        * UserInterface/Views/TimelineDataGrid.css:
+        (.tree-outline.timeline-data-grid .item:hover):
+        (.tree-outline.timeline-data-grid .item:hover .subtitle):
+        (.timeline-data-grid-tree-outline): Deleted.
+        (.timeline-data-grid-tree-outline .item): Deleted.
+        (.timeline-data-grid-tree-outline .item .status): Deleted.
+        (.timeline-data-grid-tree-outline .item .icon): Deleted.
+        (.timeline-data-grid-tree-outline .item:hover): Deleted.
+        (.timeline-data-grid-tree-outline .item .titles): Deleted.
+        (.timeline-data-grid-tree-outline .item .title::after): Deleted.
+        (.timeline-data-grid-tree-outline .item .subtitle): Deleted.
+        (.timeline-data-grid-tree-outline .item:hover .subtitle): Deleted.
+        (.timeline-data-grid-tree-outline .item .subtitle:empty): Deleted.
+        (.timeline-data-grid-tree-outline .item.small): Deleted.
+        (.timeline-data-grid-tree-outline .item.small .icon): Deleted.
+        (.timeline-data-grid-tree-outline .item.small .status): Deleted.
+        (.timeline-data-grid-tree-outline .item.small .titles): Deleted.
+        (.timeline-data-grid-tree-outline .item.small .subtitle): Deleted.
+        (.timeline-data-grid-tree-outline .item.small:not(.two-line) .title::after): Deleted.
+        (.timeline-data-grid-tree-outline .item.small:not(.two-line) .subtitle::before): Deleted.
+        Updated selectors with new tree outline class names, removed styles which
+        are now provided by TreeOutline.css.
+
+        * UserInterface/Views/TimelineDataGrid.js:
+        (WebInspector.TimelineDataGrid.prototype._createPopoverContent):
+        Use default TreeOutline DOM element, and simplify element class name.
+
+        * UserInterface/Views/TimelineRecordTreeElement.js:
+        (WebInspector.TimelineRecordTreeElement): Deleted.
+        Removed call to obsolete TreeOutline.prototype.small setter.
+
+        * UserInterface/Views/TimelineSidebarPanel.css:
+        (.sidebar &gt; .panel.navigation.timeline &gt; .timelines-content .close-button): Deleted.
+        Removed styles which are now provided by TreeOutline.css.
+
+        * UserInterface/Views/TimelineSidebarPanel.js:
+        (WebInspector.TimelineSidebarPanel):
+        Disable tree outline disclosure buttons, enable large tree style.
+
+        * UserInterface/Views/TimelineView.css:
+        (.panel.navigation.timeline &gt; .content &gt; .tree-outline):
+        (.panel.navigation.timeline.timeline-recording-content-view-showing &gt; .content &gt; .tree-outline):
+        (.panel.navigation.timeline &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline): Deleted.
+        (.panel.navigation.timeline.timeline-recording-content-view-showing &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline): Deleted.
+        Updated selectors with new tree outline class names.
+
+        * UserInterface/Views/TreeOutline.css: Added.
+        (.tree-outline .children):
+        (.tree-outline .children.expanded):
+        (.tree-outline .item):
+        (.tree-outline.compact .item):
+        (.tree-outline.large .item):
+        (.tree-outline.hide-disclosure-buttons &gt; .children):
+        (.tree-outline &gt; .children.hide-disclosure-buttons &gt; .children):
+        (.tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) .icon):
+        (.tree-outline .item .disclosure-button):
+        (.tree-outline.hide-disclosure-buttons .item .disclosure-button):
+        (.tree-outline .item.parent .disclosure-button):
+        (.tree-outline:matches(:focus, .force-focus) .item.selected .disclosure-button):
+        (.tree-outline .item.expanded .disclosure-button):
+        (.tree-outline:matches(:focus, .force-focus) .item.selected.expanded .disclosure-button):
+        (.tree-outline .item .icon):
+        (.tree-outline.compact .item .icon):
+        (.tree-outline.large .item .icon):
+        (.tree-outline .item .status):
+        (.tree-outline.large .item .status):
+        (.tree-outline .item .status:empty):
+        (.tree-outline .item.selected):
+        (.tree-outline:matches(:focus, .force-focus) .item.selected):
+        (body.window-inactive .tree-outline .item.selected):
+        (.tree-outline .item .titles):
+        (.tree-outline.compact .item .titles):
+        (.tree-outline.large .item .titles):
+        (.tree-outline .item .highlighted):
+        (.tree-outline.large .item .titles.no-subtitle):
+        (.tree-outline .item .title::after):
+        (.tree-outline .item .subtitle):
+        (.tree-outline.large .item .subtitle):
+        (.tree-outline:matches(:focus, .force-focus) .item.selected .subtitle):
+        (.tree-outline .item .subtitle:empty):
+        (.tree-outline:not(.large) .item .status .indeterminate-progress-spinner):
+        (.tree-outline .item .subtitle::before):
+        Relocated tree outlines styles from NavigationSidebarPanel.css.
+
+        * UserInterface/Views/TreeOutline.js:
+        (WebInspector.TreeOutline):
+        (WebInspector.TreeOutline.prototype.get compact):
+        (WebInspector.TreeOutline.prototype.set compact):
+        (WebInspector.TreeOutline.prototype.get large):
+        (WebInspector.TreeOutline.prototype.set large):
+        (WebInspector.TreeOutline.prototype.get disclosureButtons):
+        (WebInspector.TreeOutline.prototype.set disclosureButtons):
+        (WebInspector.TreeOutline.prototype.get customIndent):
+        (WebInspector.TreeOutline.prototype.set customIndent):
+        Added properties for tree element appearance and indentation
+        behavior, so clients don't need to manually toggle style classes.
+        (WebInspector.TreeOutline._generateStyleRulesIfNeeded):
+        Relocated from NavigationSidebarPanel.js.
+
+        * UserInterface/Views/TypeTreeElement.js:
+        (WebInspector.TypeTreeElement): Deleted.
+        Removed call to obsolete TreeOutline.prototype.small setter.
+
+        * UserInterface/Views/TypeTreeView.css:
+        (.tree-outline.type):
+        (.tree-outline.type li):
+        (.tree-outline.type ol):
+        (.tree-outline.type ol.expanded):
+        (.tree-outline.type li .empty-message):
+        (.type-tree-outline): Deleted.
+        (.type-tree-outline li): Deleted.
+        (.type-tree-outline ol): Deleted.
+        (.type-tree-outline ol.expanded): Deleted.
+        (.type-tree-outline li .empty-message): Deleted.
+        Updated selectors with new tree outline class names.
+
+        * UserInterface/Views/TypeTreeView.js:
+        (WebInspector.TypeTreeView):
+        Use default TreeOutline DOM element, and simplify element class name.
+
</ins><span class="cx"> 2016-01-13  Joseph Pecoraro  &lt;pecoraro@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: Inspector should use the last sourceURL / sourceMappingURL directive
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -162,6 +162,7 @@
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/TimelineView.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/Toolbar.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/TreeElementStatusButton.css&quot;&gt;
</span><ins>+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/TreeOutline.css&quot;&gt;
</ins><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/TypeTokenView.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/TypeTreeElement.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/TypeTreeView.css&quot;&gt;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsApplicationCacheFrameTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -31,8 +31,6 @@
</span><span class="cx"> 
</span><span class="cx">         super(&quot;application-cache-frame&quot;, &quot;&quot;, &quot;&quot;, representedObject, false);
</span><span class="cx"> 
</span><del>-        this.small = true;
-
</del><span class="cx">         this.updateTitles();
</span><span class="cx">     }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsBreakpointTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -58,7 +58,6 @@
</span><span class="cx">         this._updateStatus();
</span><span class="cx"> 
</span><span class="cx">         this.status = this._statusImageElement;
</span><del>-        this.small = true;
</del><span class="cx"> 
</span><span class="cx">         this._iconAnimationLayerElement = document.createElement(&quot;span&quot;);
</span><span class="cx">         this.iconElement.appendChild(this._iconAnimationLayerElement);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCallFrameTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -45,8 +45,6 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this._callFrame = callFrame;
</span><del>-
-        this.small = true;
</del><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Public
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsContentFlowTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -35,7 +35,5 @@
</span><span class="cx">         console.assert(representedObject instanceof WebInspector.ContentFlow);
</span><span class="cx"> 
</span><span class="cx">         super(&quot;content-flow-icon&quot;, representedObject.name, null, representedObject, false);
</span><del>-
-        this.small = true;
</del><span class="cx">     }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -23,7 +23,7 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-.dom-tree-outline {
</del><ins>+.tree-outline.dom {
</ins><span class="cx">     position: relative;
</span><span class="cx"> 
</span><span class="cx">     padding: 0 6px;
</span><span class="lines">@@ -39,11 +39,11 @@
</span><span class="cx">     color: black;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline li.hovered:not(.selected) .selection {
</del><ins>+.tree-outline.dom li.hovered:not(.selected) .selection {
</ins><span class="cx">     background-color: hsla(209, 100%, 49%, 0.1);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline li .selection {
</del><ins>+.tree-outline.dom li .selection {
</ins><span class="cx">     position: absolute;
</span><span class="cx">     left: 0;
</span><span class="cx">     right: 0;
</span><span class="lines">@@ -51,50 +51,50 @@
</span><span class="cx">     z-index: -1;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline li.selected .selection {
</del><ins>+.tree-outline.dom li.selected .selection {
</ins><span class="cx">     background-color: hsl(0, 0%, 83%);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline li.elements-drag-over .selection {
</del><ins>+.tree-outline.dom li.elements-drag-over .selection {
</ins><span class="cx">     margin-top: -2px;
</span><span class="cx">     border-top: 2px solid hsl(209, 100%, 49%);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline:focus li.selected .selection {
</del><ins>+.tree-outline.dom:focus li.selected .selection {
</ins><span class="cx">     background-color: hsl(209, 100%, 49%);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline li.selected &gt; span::after {
</del><ins>+.tree-outline.dom li.selected &gt; span::after {
</ins><span class="cx">     content: &quot; = $0&quot;;
</span><span class="cx">     color: var(--console-secondary-text-color);
</span><span class="cx">     position: absolute;
</span><span class="cx">     white-space: pre;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline:focus li.selected &gt; span::after {
</del><ins>+.tree-outline.dom:focus li.selected &gt; span::after {
</ins><span class="cx">     color: hsla(0, 100%, 100%, 0.7);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline ol {
</del><ins>+.tree-outline.dom ol {
</ins><span class="cx">     list-style-type: none;
</span><span class="cx">     padding-left: 1.2em;
</span><span class="cx">     margin: 0;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline ol.children {
</del><ins>+.tree-outline.dom ol.children {
</ins><span class="cx">     display: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline ol.children.expanded {
</del><ins>+.tree-outline.dom ol.children.expanded {
</ins><span class="cx">     display: block;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline li {
</del><ins>+.tree-outline.dom li {
</ins><span class="cx">     padding: 0 0 0 17px;
</span><span class="cx">     word-wrap: break-word;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline li.pseudo-class-enabled &gt; .selection::before {
</del><ins>+.tree-outline.dom li.pseudo-class-enabled &gt; .selection::before {
</ins><span class="cx">     display: inline-block;
</span><span class="cx">     position: absolute;
</span><span class="cx">     top: 4px;
</span><span class="lines">@@ -106,31 +106,31 @@
</span><span class="cx">     border-radius: 50%;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline.single-node li {
</del><ins>+.tree-outline.dom.single-node li {
</ins><span class="cx">     padding-left: 2px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline:focus li.selected {
</del><ins>+.tree-outline.dom:focus li.selected {
</ins><span class="cx">     color: white;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline:focus li.selected.pseudo-class-enabled &gt; .selection::before {
</del><ins>+.tree-outline.dom:focus li.selected.pseudo-class-enabled &gt; .selection::before {
</ins><span class="cx">     background-color: hsl(0, 100%, 100%);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline:focus li.selected * {
</del><ins>+.tree-outline.dom:focus li.selected * {
</ins><span class="cx">     color: inherit;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline li.parent {
</del><ins>+.tree-outline.dom li.parent {
</ins><span class="cx">     margin-left: -15px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline li .html-tag.close {
</del><ins>+.tree-outline.dom li .html-tag.close {
</ins><span class="cx">     margin-left: -13px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline li.parent::before {
</del><ins>+.tree-outline.dom li.parent::before {
</ins><span class="cx">     float: left;
</span><span class="cx"> 
</span><span class="cx">     content: &quot;&quot;;
</span><span class="lines">@@ -146,33 +146,33 @@
</span><span class="cx">     padding-right: 2px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline:focus li.parent.selected::before {
</del><ins>+.tree-outline.dom:focus li.parent.selected::before {
</ins><span class="cx">     background-image: url(../Images/DisclosureTriangles.svg#closed-selected);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline li.parent.expanded::before {
</del><ins>+.tree-outline.dom li.parent.expanded::before {
</ins><span class="cx">     background-image: url(../Images/DisclosureTriangles.svg#open-normal);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline:focus li.parent.expanded.selected::before {
</del><ins>+.tree-outline.dom:focus li.parent.expanded.selected::before {
</ins><span class="cx">     background-image: url(../Images/DisclosureTriangles.svg#open-selected);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline .html-text-node.large {
</del><ins>+.tree-outline.dom .html-text-node.large {
</ins><span class="cx">     display: inline-block;
</span><span class="cx">     min-width: 100%;
</span><span class="cx">     white-space: pre-wrap;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline .html-pseudo-element {
</del><ins>+.tree-outline.dom .html-pseudo-element {
</ins><span class="cx">     color: hsl(0, 59%, 41%);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.dom-tree-outline .html-fragment.shadow {
</del><ins>+.tree-outline.dom .html-fragment.shadow {
</ins><span class="cx">     opacity: 0.6;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.showing-find-banner .dom-tree-outline .search-highlight {
</del><ins>+.showing-find-banner .tree-outline.dom .search-highlight {
</ins><span class="cx">     color: black;
</span><span class="cx">     background-color: hsla(53, 83%, 53%, 0.2);
</span><span class="cx">     border-bottom: 1px solid hsl(47, 82%, 60%);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -32,21 +32,19 @@
</span><span class="cx"> {
</span><span class="cx">     constructor(omitRootDOMNode, selectEnabled, excludeRevealElementContextMenu)
</span><span class="cx">     {
</span><del>-        var element = document.createElement(&quot;ol&quot;);
</del><ins>+        super();
</ins><span class="cx"> 
</span><del>-        super(element);
</del><ins>+        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);
</ins><span class="cx"> 
</span><del>-        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);
</del><ins>+        this.element.classList.add(&quot;dom&quot;, WebInspector.SyntaxHighlightedStyleClassName);
</ins><span class="cx"> 
</span><del>-        element.classList.add(&quot;dom-tree-outline&quot;, WebInspector.SyntaxHighlightedStyleClassName);
-
</del><span class="cx">         this._includeRootDOMNode = !omitRootDOMNode;
</span><span class="cx">         this._selectEnabled = selectEnabled;
</span><span class="cx">         this._excludeRevealElementContextMenu = excludeRevealElementContextMenu;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDatabaseTableTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -30,7 +30,5 @@
</span><span class="cx">         console.assert(representedObject instanceof WebInspector.DatabaseTableObject);
</span><span class="cx"> 
</span><span class="cx">         super(&quot;database-table-icon&quot;, representedObject.name, null, representedObject, false);
</span><del>-
-        this.small = true;
</del><span class="cx">     }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDatabaseTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -31,7 +31,6 @@
</span><span class="cx"> 
</span><span class="cx">         super(&quot;database-icon&quot;, representedObject.name, null, representedObject, true);
</span><span class="cx"> 
</span><del>-        this.small = true;
</del><span class="cx">         this.hasChildren = false;
</span><span class="cx"> 
</span><span class="cx">         // Since we are initially telling the tree element we don't have any children, make sure that we try to populate
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsErrorObjectViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -53,10 +53,10 @@
</span><span class="cx">     display: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.error-object:not(.expanded) .error-object-outline {
</del><ins>+.error-object:not(.expanded) .tree-outline {
</ins><span class="cx">     display: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.error-object-outline {
</del><ins>+.error-object .tree-outline {
</ins><span class="cx">     padding-left: 16px
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsErrorObjectViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -40,7 +40,6 @@
</span><span class="cx">         previewElement.addEventListener(&quot;click&quot;, this._handlePreviewOrTitleElementClick.bind(this));
</span><span class="cx"> 
</span><span class="cx">         this._outlineElement = this._element.appendChild(document.createElement(&quot;div&quot;));
</span><del>-        this._outlineElement.classList.add(&quot;error-object-outline&quot;);
</del><span class="cx">         this._outline = new WebInspector.TreeOutline(this._outlineElement);
</span><span class="cx">     }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFolderTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -38,8 +38,6 @@
</span><span class="cx">         classNames.unshift(WebInspector.FolderTreeElement.FolderIconStyleClassName);
</span><span class="cx"> 
</span><span class="cx">         super(classNames, title, subtitle, representedObject, true);
</span><del>-
-        this.small = true;
</del><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // No Methods or Properties
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFormattedValuecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -62,21 +62,21 @@
</span><span class="cx">     color: hsl(0, 0%, 50%);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.formatted-node &gt; .dom-tree-outline {
</del><ins>+.formatted-node &gt; .tree-outline.dom {
</ins><span class="cx">     display: block !important;
</span><span class="cx">     padding: 0;
</span><span class="cx">     margin-left: -2px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.formatted-node &gt; .dom-tree-outline ol {
</del><ins>+.formatted-node &gt; .tree-outline.dom ol {
</ins><span class="cx">     -webkit-padding-start: 1.2em;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.formatted-node &gt; .dom-tree-outline li {
</del><ins>+.formatted-node &gt; .tree-outline.dom li {
</ins><span class="cx">     -webkit-user-select: none !important;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.formatted-node &gt; .dom-tree-outline li.hovered:not(.selected) .selection {
</del><ins>+.formatted-node &gt; .tree-outline.dom li.hovered:not(.selected) .selection {
</ins><span class="cx">     display: block;
</span><span class="cx">     left: -1px;
</span><span class="cx">     right: -2px;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsGeneralTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -115,40 +115,6 @@
</span><span class="cx">             this._listItemNode.classList.remove(className);
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    get small()
-    {
-        return this._small;
-    }
-
-    set small(x)
-    {
-        this._small = x;
-
-        if (this._listItemNode) {
-            if (this._small)
-                this._listItemNode.classList.add(WebInspector.GeneralTreeElement.SmallStyleClassName);
-            else
-                this._listItemNode.classList.remove(WebInspector.GeneralTreeElement.SmallStyleClassName);
-        }
-    }
-
-    get twoLine()
-    {
-        return this._twoLine;
-    }
-
-    set twoLine(x)
-    {
-        this._twoLine = x;
-
-        if (this._listItemNode) {
-            if (this._twoLine)
-                this._listItemNode.classList.add(WebInspector.GeneralTreeElement.TwoLineStyleClassName);
-            else
-                this._listItemNode.classList.remove(WebInspector.GeneralTreeElement.TwoLineStyleClassName);
-        }
-    }
-
</del><span class="cx">     get mainTitle()
</span><span class="cx">     {
</span><span class="cx">         return this._mainTitle;
</span><span class="lines">@@ -237,12 +203,6 @@
</span><span class="cx">         if (this._classNames)
</span><span class="cx">             this._listItemNode.classList.add(...this._classNames);
</span><span class="cx"> 
</span><del>-        if (this._small)
-            this._listItemNode.classList.add(WebInspector.GeneralTreeElement.SmallStyleClassName);
-
-        if (this._twoLine)
-            this._listItemNode.classList.add(WebInspector.GeneralTreeElement.TwoLineStyleClassName);
-
</del><span class="cx">         this._listItemNode.appendChild(this._disclosureButton);
</span><span class="cx">         this._listItemNode.appendChild(this._iconElement);
</span><span class="cx">         if (this._statusElement)
</span><span class="lines">@@ -370,8 +330,9 @@
</span><span class="cx">         // and the tool tip only cares about the text.
</span><span class="cx">         let mainTitleText = this._mainTitleElement.textContent;
</span><span class="cx">         let subtitleText = this._subtitleElement ? this._subtitleElement.textContent : &quot;&quot;;
</span><ins>+        let large = this.treeOutline  &amp;&amp; this.treeOutline.large;
</ins><span class="cx">         if (mainTitleText &amp;&amp; subtitleText)
</span><del>-            this._listItemNode.title = mainTitleText + (this._small &amp;&amp; !this._twoLine ? &quot; \u2014 &quot; : &quot;\n&quot;) + subtitleText;
</del><ins>+            this._listItemNode.title = mainTitleText + (large ? &quot;\n&quot; : &quot; \u2014 &quot;) + subtitleText;
</ins><span class="cx">         else if (mainTitleText)
</span><span class="cx">             this._listItemNode.title = mainTitleText;
</span><span class="cx">         else
</span><span class="lines">@@ -401,8 +362,6 @@
</span><span class="cx"> WebInspector.GeneralTreeElement.MainTitleElementStyleClassName = &quot;title&quot;;
</span><span class="cx"> WebInspector.GeneralTreeElement.SubtitleElementStyleClassName = &quot;subtitle&quot;;
</span><span class="cx"> WebInspector.GeneralTreeElement.NoSubtitleStyleClassName = &quot;no-subtitle&quot;;
</span><del>-WebInspector.GeneralTreeElement.SmallStyleClassName = &quot;small&quot;;
-WebInspector.GeneralTreeElement.TwoLineStyleClassName = &quot;two-line&quot;;
</del><span class="cx"> 
</span><span class="cx"> WebInspector.GeneralTreeElement.Event = {
</span><span class="cx">     MainTitleDidChange: &quot;general-tree-element-main-title-did-change&quot;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsIndexedDatabaseObjectStoreIndexTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -32,8 +32,6 @@
</span><span class="cx">         super(&quot;database-table-icon&quot;, objectStoreIndex.name, null, objectStoreIndex, false);
</span><span class="cx"> 
</span><span class="cx">         this._objectStoreIndex = objectStoreIndex;
</span><del>-
-        this.small = true;
</del><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Public
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsIndexedDatabaseObjectStoreTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -32,8 +32,6 @@
</span><span class="cx">         super(&quot;database-table-icon&quot;, objectStore.name, null, objectStore, !!objectStore.indexes.length);
</span><span class="cx"> 
</span><span class="cx">         this._objectStore = objectStore;
</span><del>-
-        this.small = true;
</del><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Public
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsIndexedDatabaseTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -32,8 +32,6 @@
</span><span class="cx">         super(&quot;database-icon&quot;, indexedDatabase.name, null, indexedDatabase, !!indexedDatabase.objectStores.length);
</span><span class="cx"> 
</span><span class="cx">         this._indexedDatabase = indexedDatabase;
</span><del>-
-        this.small = true;
</del><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Public
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsIssueTreeElementcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -31,11 +31,3 @@
</span><span class="cx"> .issue.error .icon {
</span><span class="cx">     background-image: url(../Images/Error.svg);
</span><span class="cx"> }
</span><del>-
-.navigation-sidebar-panel-content-tree-outline.small .item.issue .icon,
-.navigation-sidebar-panel-content-tree-outline .children.small .item.issue .icon,
-.navigation-sidebar-panel-content-tree-outline .item.small.issue .icon {
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 14px;
-}
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsIssueTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -39,7 +39,6 @@
</span><span class="cx"> 
</span><span class="cx">         super([WebInspector.IssueTreeElement.StyleClassName, levelStyleClassName], null, null, issueMessage, false);
</span><span class="cx"> 
</span><del>-        this.small = true;
</del><span class="cx">         this._issueMessage = issueMessage;
</span><span class="cx">         this._updateTitles();
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -35,6 +35,6 @@
</span><span class="cx">     border-right: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.layout .item .subtitle {
</del><ins>+.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.layout .item .subtitle {
</ins><span class="cx">     display: none;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLogTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -32,8 +32,6 @@
</span><span class="cx">         super(&quot;log-icon&quot;, WebInspector.UIString(&quot;Console&quot;), representedObject.startDate.toLocaleTimeString(), representedObject, false);
</span><span class="cx"> 
</span><span class="cx">         this._logObject = representedObject;
</span><del>-
-        this.small = true;
</del><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Public
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -89,251 +89,3 @@
</span><span class="cx">     border-radius: 6px;
</span><span class="cx">     padding: 5px 15px 6px;
</span><span class="cx"> }
</span><del>-
-.navigation-sidebar-panel-content-tree-outline,
-.navigation-sidebar-panel-content-tree-outline .children {
-    padding: 0;
-    margin: 0;
-
-    outline: none;
-
-    list-style: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline .children {
-    display: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline .children.expanded {
-    display: block;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item {
-    height: 36px;
-    line-height: 34px;
-
- /* The item depth padding style rules are generated by NavigationSidebarPanel.js.
-    Any changes to this padding needs to be changed there too. */
-
-    padding: 0 5px;
-
-    border-top: 1px solid transparent;
-
-    white-space: nowrap;
-}
-
-.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons &gt; .children {
-    display: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline &gt; .children.hide-disclosure-buttons &gt; .children {
-    display: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) .icon {
-    margin-left: 16px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons .item.small {
-    padding-left: 8px;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .disclosure-button {
-    display: none;
-
-    float: left;
-
-    width: 16px;
-    height: 100%;
-
-    border: 0;
-
-    background-color: transparent;
-    background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 13px 13px;
-
-    -webkit-appearance: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons .item .disclosure-button {
-    display: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item.parent .disclosure-button {
-    display: block;
-}
-
-.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .disclosure-button {
-    background-image: url(../Images/DisclosureTriangles.svg#closed-selected) !important;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item.expanded .disclosure-button {
-    background-image: url(../Images/DisclosureTriangles.svg#open-normal);
-}
-
-.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected.expanded .disclosure-button {
-    background-image: url(../Images/DisclosureTriangles.svg#open-selected) !important;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .icon {
-    float: left;
-    position: relative;
-
-    width: 32px;
-    height: 32px;
-
-    margin-top: 1px;
-    margin-right: 3px;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .status {
-    float: right;
-
-    height: 16px;
-
-    margin-top: 9px;
-    margin-left: 4px;
-
-    line-height: 1em;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .status:empty {
-    display: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item.selected {
-    background-color: hsl(0, 0%, 83%);
-}
-
-.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected {
-    color: white;
-    background-color: hsl(209, 100%, 49%);
-}
-
-body.window-inactive .navigation-sidebar-panel-content-tree-outline .item.selected {
-    background-color: hsl(0, 0%, 83%);
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .titles {
-    position: relative;
-    top: 5px;
-
-    line-height: 11px;
-
-    padding-bottom: 1px;
-
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .highlighted {
-    background-color: hsla(53, 83%, 53%, 0.2);
-    border-bottom: 1px solid hsl(47, 82%, 60%);
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .titles.no-subtitle {
-    top: 10px;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .title::after {
-    content: &quot;\A&quot;; /* Newline */
-    white-space: pre;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .subtitle {
-    font-size: 9px;
-    color: hsla(0, 0%, 0%, 0.7);
-}
-
-.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .subtitle {
-    color: hsla(0, 0%, 100%, 0.9);
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .titles.no-subtitle .subtitle,
-.navigation-sidebar-panel-content-tree-outline .item .subtitle:empty {
-    display: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small .item,
-.navigation-sidebar-panel-content-tree-outline .children.small .item,
-.navigation-sidebar-panel-content-tree-outline .item.small {
-    height: 20px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small.two-line .item,
-.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item,
-.navigation-sidebar-panel-content-tree-outline .item.small.two-line {
-    height: 26px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small .item .icon,
-.navigation-sidebar-panel-content-tree-outline .children.small .item .icon,
-.navigation-sidebar-panel-content-tree-outline .item.small .icon {
-    width: 16px;
-    height: 16px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small .item .status,
-.navigation-sidebar-panel-content-tree-outline .children.small .item .status,
-.navigation-sidebar-panel-content-tree-outline .item.small .status {
-    margin-top: 1px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small .item .status .indeterminate-progress-spinner,
-.navigation-sidebar-panel-content-tree-outline .children.small .item .status .indeterminate-progress-spinner,
-.navigation-sidebar-panel-content-tree-outline .item.small .status .indeterminate-progress-spinner {
-    margin-top: 1px;
-    width: 14px;
-    height: 14px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small .item .titles,
-.navigation-sidebar-panel-content-tree-outline .children.small .item .titles,
-.navigation-sidebar-panel-content-tree-outline .item.small .titles {
-    top: 2px;
-    line-height: normal;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small.two-line .item .status,
-.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item .status,
-.navigation-sidebar-panel-content-tree-outline .item.small.two-line .status {
-    margin-top: 4px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small.two-line .item .titles,
-.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item .titles,
-.navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles {
-    top: 0;
-    line-height: 11px;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles.no-subtitle {
-    top: 6px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small .item .subtitle,
-.navigation-sidebar-panel-content-tree-outline .children.small .item .subtitle,
-.navigation-sidebar-panel-content-tree-outline .item.small .subtitle {
-    font-size: inherit;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small.two-line .item .icon,
-.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item .icon,
-.navigation-sidebar-panel-content-tree-outline .item.small.two-line .icon {
-    margin-top: 4px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small:not(.two-line) .item .title::after,
-.navigation-sidebar-panel-content-tree-outline .children.small:not(.two-line) .item .title::after,
-.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .title::after {
-    content: &quot;&quot;;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small:not(.two-line) .item .subtitle::before,
-.navigation-sidebar-panel-content-tree-outline .children.small:not(.two-line) .item .subtitle::before,
-.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .subtitle::before {
-    content: &quot; — &quot;;
-}
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -62,8 +62,6 @@
</span><span class="cx">         this._emptyContentPlaceholderElements = new Map;
</span><span class="cx">         this._emptyFilterResults = new Map;
</span><span class="cx"> 
</span><del>-        this._generateStyleRulesIfNeeded();
-
</del><span class="cx">         this._shouldAutoPruneStaleTopLevelResourceTreeElements = shouldAutoPruneStaleTopLevelResourceTreeElements || false;
</span><span class="cx"> 
</span><span class="cx">         if (this._shouldAutoPruneStaleTopLevelResourceTreeElements) {
</span><span class="lines">@@ -150,7 +148,7 @@
</span><span class="cx"> 
</span><span class="cx">     createContentTreeOutline(dontHideByDefault, suppressFiltering)
</span><span class="cx">     {
</span><del>-        let contentTreeOutline = new WebInspector.TreeOutline(document.createElement(&quot;ol&quot;));
</del><ins>+        let contentTreeOutline = new WebInspector.TreeOutline;
</ins><span class="cx">         contentTreeOutline.allowsRepeatSelection = true;
</span><span class="cx">         contentTreeOutline.hidden = !dontHideByDefault;
</span><span class="cx">         contentTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName);
</span><span class="lines">@@ -661,31 +659,6 @@
</span><span class="cx">         this._selectedContentTreeOutline = selectedElement ? selectedElement.treeOutline : null;
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _generateStyleRulesIfNeeded()
-    {
-        if (WebInspector.NavigationSidebarPanel._styleElement)
-            return;
-
-        WebInspector.NavigationSidebarPanel._styleElement = document.createElement(&quot;style&quot;);
-
-        var maximumSidebarTreeDepth = 32;
-        var baseLeftPadding = 5; // Matches the padding in NavigationSidebarPanel.css for the item class. Keep in sync.
-        var depthPadding = 10;
-
-        var styleText = &quot;&quot;;
-        var childrenSubstring = &quot;&quot;;
-        for (var i = 1; i &lt;= maximumSidebarTreeDepth; ++i) {
-            // Keep all the elements at the same depth once the maximum is reached.
-            childrenSubstring += i === maximumSidebarTreeDepth ? &quot; .children&quot; : &quot; &gt; .children&quot;;
-            styleText += &quot;.&quot; + WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName + childrenSubstring + &quot; &gt; .item { &quot;;
-            styleText += &quot;padding-left: &quot; + (baseLeftPadding + (depthPadding * i)) + &quot;px; }\n&quot;;
-        }
-
-        WebInspector.NavigationSidebarPanel._styleElement.textContent = styleText;
-
-        document.head.appendChild(WebInspector.NavigationSidebarPanel._styleElement);
-    }
-
</del><span class="cx">     _checkForStaleResourcesIfNeeded()
</span><span class="cx">     {
</span><span class="cx">         if (!this._checkForStaleResourcesTimeoutIdentifier || !this._shouldAutoPruneStaleTopLevelResourceTreeElements)
</span><span class="lines">@@ -815,6 +788,5 @@
</span><span class="cx"> WebInspector.NavigationSidebarPanel.OverflowShadowElementStyleClassName = &quot;overflow-shadow&quot;;
</span><span class="cx"> WebInspector.NavigationSidebarPanel.TopOverflowShadowElementStyleClassName = &quot;top&quot;;
</span><span class="cx"> WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName = &quot;navigation-sidebar-panel-content-tree-outline&quot;;
</span><del>-WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName = &quot;hide-disclosure-buttons&quot;;
</del><span class="cx"> WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderElementStyleClassName = &quot;empty-content-placeholder&quot;;
</span><span class="cx"> WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderMessageElementStyleClassName = &quot;message&quot;;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -81,16 +81,16 @@
</span><span class="cx">     display: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.sidebar &gt; .panel.navigation.network.network-grid-content-view-showing .navigation-sidebar-panel-content-tree-outline.network-grid .item .subtitle {
</del><ins>+.sidebar &gt; .panel.navigation.network.network-grid-content-view-showing .tree-outline.network-grid .item .subtitle {
</ins><span class="cx">     display: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.sidebar &gt; .panel.navigation.network &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline {
</del><ins>+.sidebar &gt; .panel.navigation.network &gt; .content &gt; .tree-outline {
</ins><span class="cx">     min-height: 100%;
</span><span class="cx">     background-image: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.sidebar &gt; .panel.navigation.network.network-grid-content-view-showing &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline {
</del><ins>+.sidebar &gt; .panel.navigation.network.network-grid-content-view-showing &gt; .content &gt; .tree-outline {
</ins><span class="cx">     background-image: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 0%, 0.03) 50%, hsla(0, 0%, 0%, 0.03));
</span><span class="cx">     background-size: 100% 40px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -59,7 +59,7 @@
</span><span class="cx">         this._navigationBar.addNavigationItem(this._scopeBar);
</span><span class="cx"> 
</span><span class="cx">         this.contentTreeOutline.element.classList.add(&quot;network-grid&quot;);
</span><del>-        this.contentTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
</del><ins>+        this.contentTreeOutline.disclosureButtons = false;
</ins><span class="cx"> 
</span><span class="cx">         this.contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._contentBrowserCurrentContentViewDidChange, this);
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -31,6 +31,6 @@
</span><span class="cx">     bottom: 0;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.network .item .subtitle {
</del><ins>+.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.network .item .subtitle {
</ins><span class="cx">     display: none;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -31,7 +31,7 @@
</span><span class="cx"> 
</span><span class="cx">         console.assert(timeline.type === WebInspector.TimelineRecord.Type.Network);
</span><span class="cx"> 
</span><del>-        this.navigationSidebarTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
</del><ins>+        this.navigationSidebarTreeOutline.disclosureButtons = false;
</ins><span class="cx">         this.navigationSidebarTreeOutline.element.classList.add(&quot;network&quot;);
</span><span class="cx"> 
</span><span class="cx">         var columns = {domain: {}, type: {}, method: {}, scheme: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, requestSent: {}, latency: {}, duration: {}};
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeArrayIndexTreeElementcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -30,7 +30,6 @@
</span><span class="cx">     margin-bottom: 1px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.object-tree .object-tree-array-index &gt; .disclosure-button,
</del><span class="cx"> .object-tree .object-tree-array-index &gt; .icon {
</span><span class="cx">     display: none;
</span><span class="cx"> }
</span><span class="lines">@@ -50,7 +49,7 @@
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> /* An array inside an array we should reduce the padding-start. */
</span><del>-.object-tree-array-index .index-value .object-tree .object-tree-outline {
</del><ins>+.object-tree-array-index .index-value .object-tree .tree-outline.object {
</ins><span class="cx">     -webkit-padding-start: 6px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="lines">@@ -60,6 +59,6 @@
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> /* A node inside an array we should reduce the padding-start. */
</span><del>-.object-tree-array-index .index-value .formatted-node .dom-tree-outline {
</del><ins>+.object-tree-array-index .index-value .formatted-node .tree-outline.dom {
</ins><span class="cx">     -webkit-padding-start: 0px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeBaseTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -36,7 +36,6 @@
</span><span class="cx">         this._property = property;
</span><span class="cx">         this._propertyPath = propertyPath;
</span><span class="cx"> 
</span><del>-        this.small = true;
</del><span class="cx">         this.toggleOnClick = true;
</span><span class="cx">         this.selectable = false;
</span><span class="cx">         this.tooltipHandledSeparately = true;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreePropertyTreeElementcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -23,57 +23,11 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-.object-tree-property {
-    margin-top: 1px;
</del><ins>+.tree-outline .item.object-tree-property {
+    margin-top: 0;
+    border-top: 0;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-.object-tree-property &gt; .titles {
-    position: relative;
-    line-height: normal;
-    padding-bottom: 1px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    display: inline-block;
-    vertical-align: top;
-}
-
-.object-tree-property &gt; .disclosure-button {
-    display: inline-block;
-    vertical-align: top;
-
-    width: 15px;
-    height: 16px;
-
-    margin-left: -1px;
-    border: 0;
-    background: none;
-    -webkit-appearance: none;
-}
-
-.object-tree-property.parent &gt; .disclosure-button {
-    background-color: transparent;
-    background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 13px 13px;
-}
-
-.object-tree-property.parent.expanded &gt; .disclosure-button {
-    background-image: url(../Images/DisclosureTriangles.svg#open-normal);
-}
-
-.object-tree-property &gt; .icon {
-    display: inline-block;
-    vertical-align: top;
-    position: relative;
-
-    width: 16px;
-    height: 16px;
-
-    margin-right: 3px;
-}
-
</del><span class="cx"> .object-tree-property.boolean &gt; .icon {
</span><span class="cx">     content: url(../Images/TypeBoolean.svg);
</span><span class="cx"> }
</span><span class="lines">@@ -130,7 +84,7 @@
</span><span class="cx">     opacity: 0.6;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.object-tree-property.prototype-property {
</del><ins>+.item.object-tree-property.prototype-property {
</ins><span class="cx">     display: inline-block;
</span><span class="cx"> 
</span><span class="cx">     border: 1px solid hsla(0, 0%, 0%, 0.06);
</span><span class="lines">@@ -149,7 +103,7 @@
</span><span class="cx">     display: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.object-tree-property.prototype-property + ol {
</del><ins>+.item.object-tree-property.prototype-property + ol {
</ins><span class="cx">     -webkit-padding-start: 0px;
</span><span class="cx"> }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -72,15 +72,15 @@
</span><span class="cx">     width: 0px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.object-tree .object-tree-outline {
</del><ins>+.object-tree .tree-outline.object {
</ins><span class="cx">     display: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.object-tree.expanded &gt; .object-tree-outline {
</del><ins>+.object-tree.expanded &gt; .tree-outline.object {
</ins><span class="cx">     display: block;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.object-tree-outline {
</del><ins>+.tree-outline.object {
</ins><span class="cx">     margin: 0;
</span><span class="cx">     padding: 0 6px 2px;
</span><span class="cx">     list-style: none;
</span><span class="lines">@@ -88,7 +88,8 @@
</span><span class="cx">     outline: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.object-tree.properties-only .object-tree-outline {
</del><ins>+.tree-outline.object .item,
+.object-tree.properties-only .tree-outline.object {
</ins><span class="cx">     padding-left: 0;
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="lines">@@ -96,7 +97,7 @@
</span><span class="cx">     opacity: 1;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.object-tree-outline li {
</del><ins>+.tree-outline.object li {
</ins><span class="cx">     white-space: nowrap;
</span><span class="cx">     text-overflow: ellipsis;
</span><span class="cx">     overflow: hidden;
</span><span class="lines">@@ -104,18 +105,18 @@
</span><span class="cx">     cursor: default;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.object-tree-outline ol {
</del><ins>+.tree-outline.object ol {
</ins><span class="cx">     display: none;
</span><span class="cx">     margin: 0;
</span><span class="cx">     -webkit-padding-start: 16px;
</span><span class="cx">     list-style: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.object-tree-outline ol.expanded {
</del><ins>+.tree-outline.object ol.expanded {
</ins><span class="cx">     display: block;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.object-tree-outline li .empty-message {
</del><ins>+.tree-outline.object li .empty-message {
</ins><span class="cx">     color: hsl(0, 0%, 60%);
</span><span class="cx">     margin-left: 15px;
</span><span class="cx">     font-family: -apple-system, sans-serif;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -70,10 +70,11 @@
</span><span class="cx">             this._element.appendChild(this._titleElement);
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        this._outlineElement = document.createElement(&quot;ol&quot;);
-        this._outlineElement.className = &quot;object-tree-outline&quot;;
-        this._outline = new WebInspector.TreeOutline(this._outlineElement);
-        this._element.appendChild(this._outlineElement);
</del><ins>+        this._outline = new WebInspector.TreeOutline;
+        this._outline.compact = true;
+        this._outline.customIndent = true;
+        this._outline.element.classList.add(&quot;object&quot;);
+        this._element.appendChild(this._outline.element);
</ins><span class="cx"> 
</span><span class="cx">         // FIXME: Support editable ObjectTrees.
</span><span class="cx">     }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsProfileNodeTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -79,7 +79,6 @@
</span><span class="cx">         this._profileNode = profileNode;
</span><span class="cx">         this._delegate = delegate || null;
</span><span class="cx"> 
</span><del>-        this.small = true;
</del><span class="cx">         this.shouldRefreshChildren = true;
</span><span class="cx"> 
</span><span class="cx">         if (sourceCodeLocation)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -31,6 +31,6 @@
</span><span class="cx">     bottom: 0;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.rendering-frame .item:not(.paint-record):not(.layout-record) .subtitle {
</del><ins>+.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.rendering-frame .item:not(.paint-record):not(.layout-record) .subtitle {
</ins><span class="cx">     display: none;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResourceSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -67,7 +67,7 @@
</span><span class="cx">         this.contentTreeOutline.includeSourceMapResourceChildren = true;
</span><span class="cx"> 
</span><span class="cx">         if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript)
</span><del>-            this.contentTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
</del><ins>+            this.contentTreeOutline.disclosureButtons = false;
</ins><span class="cx"> 
</span><span class="cx">         if (WebInspector.frameResourceManager.mainFrame)
</span><span class="cx">             this._mainFrameMainResourceDidChange(WebInspector.frameResourceManager.mainFrame);
</span><span class="lines">@@ -378,7 +378,7 @@
</span><span class="cx">     _extraDomainsActivated()
</span><span class="cx">     {
</span><span class="cx">         if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript)
</span><del>-            this.contentTreeOutline.element.classList.remove(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
</del><ins>+            this.contentTreeOutline.disclosureButtons = true;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _scopeBarSelectionDidChange(event)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScriptTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -31,22 +31,22 @@
</span><span class="cx">     bottom: 0;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle {
</del><ins>+.sidebar &gt; .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.script .item .subtitle {
</ins><span class="cx">     display: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.sidebar &gt; .panel.navigation.timeline:not(.timeline-recording-content-view-showing) .navigation-sidebar-panel-content-tree-outline.script .item .alternate-subtitle {
</del><ins>+.sidebar &gt; .panel.navigation.timeline:not(.timeline-recording-content-view-showing) .tree-outline.script .item .alternate-subtitle {
</ins><span class="cx">     display: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.navigation-sidebar-panel-content-tree-outline .item .alternate-subtitle {
</del><ins>+.tree-outline .item .alternate-subtitle {
</ins><span class="cx">     color: hsla(0, 0%, 0%, 0.7);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .alternate-subtitle {
</del><ins>+.tree-outline:matches(:focus, .force-focus) .item.selected .alternate-subtitle {
</ins><span class="cx">     color: hsla(0, 0%, 100%, 0.9);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .alternate-subtitle::before {
</del><ins>+.tree-outline .item.small:not(.two-line) .alternate-subtitle::before {
</ins><span class="cx">     content: &quot; — &quot;;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSearchResultTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -32,8 +32,6 @@
</span><span class="cx">         var title = WebInspector.SearchResultTreeElement.truncateAndHighlightTitle(representedObject.title, representedObject.searchTerm, representedObject.sourceCodeTextRange);
</span><span class="cx"> 
</span><span class="cx">         super(representedObject.className, title, null, representedObject, false);
</span><del>-
-        this.small = true;
</del><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Static
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSourceCodeTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -31,8 +31,6 @@
</span><span class="cx"> 
</span><span class="cx">         super(classNames, title, subtitle, representedObject || sourceCode, hasChildren);
</span><span class="cx"> 
</span><del>-        this.small = true;
-
</del><span class="cx">         this._updateSourceCode(sourceCode);
</span><span class="cx">     }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsStorageTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -29,7 +29,6 @@
</span><span class="cx">     {
</span><span class="cx">         super(classNames, title, null, representedObject, false);
</span><span class="cx"> 
</span><del>-        this.small = true;
</del><span class="cx">         this.flattened = false;
</span><span class="cx">     }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineDataGridcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -31,38 +31,7 @@
</span><span class="cx">     border-top-color: hsl(0, 0%, 85%);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.timeline-data-grid-tree-outline {
-    position: relative;
-    padding: 0;
-    margin: 0;
-    outline: none;
-    list-style: none;
-}
-
-.timeline-data-grid-tree-outline .item {
-    position: relative;
-    height: 36px;
-    line-height: 34px;
-    padding: 0 5px;
-    border-top: 1px solid transparent;
-    white-space: nowrap;
-}
-
-.timeline-data-grid-tree-outline &gt; .children,
-.timeline-data-grid-tree-outline .disclosure-button,
-.timeline-data-grid-tree-outline .item .status {
-    display: none;
-}
-
-.timeline-data-grid-tree-outline .item .icon {
-    float: left;
-    width: 32px;
-    height: 32px;
-    margin-top: 1px;
-    margin-right: 3px;
-}
-
-.timeline-data-grid-tree-outline .item:hover {
</del><ins>+.tree-outline.timeline-data-grid .item:hover {
</ins><span class="cx">     color: white;
</span><span class="cx">     border-radius: 4px;
</span><span class="cx">     box-shadow: inset hsl(207, 54%, 57%) 0 1px 0;
</span><span class="lines">@@ -70,63 +39,8 @@
</span><span class="cx">     background-origin: padding-box;
</span><span class="cx">     background-clip: padding-box;
</span><span class="cx">     text-shadow: hsl(209, 41%, 34%) 0 1px 0;
</span><del>-    -webkit-text-stroke: 0.4px;
</del><span class="cx"> }
</span><span class="cx"> 
</span><del>-.timeline-data-grid-tree-outline .item .titles {
-    position: relative;
-    top: 5px;
-    line-height: 11px;
-    padding-bottom: 1px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.timeline-data-grid-tree-outline .item .title::after {
-    content: &quot;\A&quot;; /* Newline */
-    white-space: pre;
-}
-
-.timeline-data-grid-tree-outline .item .subtitle {
-    font-size: 9px;
-    color: hsla(0, 0%, 0%, 0.7);
-}
-
-.timeline-data-grid-tree-outline .item:hover .subtitle {
</del><ins>+.tree-outline.timeline-data-grid .item:hover .subtitle {
</ins><span class="cx">     color: white;
</span><del>-}
-
-.timeline-data-grid-tree-outline .item .subtitle:empty {
-    display: none;
-}
-
-.timeline-data-grid-tree-outline .item.small {
-    height: 20px;
-}
-
-.timeline-data-grid-tree-outline .item.small .icon {
-    width: 16px;
-    height: 16px;
-}
-
-.timeline-data-grid-tree-outline .item.small .status {
-    margin-top: 1px;
-}
-
-.timeline-data-grid-tree-outline .item.small .titles {
-    top: 2px;
-    line-height: normal;
-}
-
-.timeline-data-grid-tree-outline .item.small .subtitle {
-    font-size: inherit;
-}
-
-.timeline-data-grid-tree-outline .item.small:not(.two-line) .title::after {
-    content: &quot;&quot;;
-}
-
-.timeline-data-grid-tree-outline .item.small:not(.two-line) .subtitle::before {
-    content: &quot; — &quot;;
-}
</del><ins>+}
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -450,9 +450,9 @@
</span><span class="cx">     _createPopoverContent()
</span><span class="cx">     {
</span><span class="cx">         if (!this._popoverCallStackTreeOutline) {
</span><del>-            var contentElement = document.createElement(&quot;ol&quot;);
-            contentElement.classList.add(&quot;timeline-data-grid-tree-outline&quot;);
-            this._popoverCallStackTreeOutline = new WebInspector.TreeOutline(contentElement);
</del><ins>+            this._popoverCallStackTreeOutline = new WebInspector.TreeOutline;
+            this._popoverCallStackTreeOutline.disclosureButtons = false;
+            this._popoverCallStackTreeOutline.element.classList.add(&quot;timeline-data-grid&quot;);
</ins><span class="cx">             this._popoverCallStackTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._popoverCallStackTreeSelectionDidChange, 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 (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -60,8 +60,6 @@
</span><span class="cx">         this._record = timelineRecord;
</span><span class="cx">         this._sourceCodeLocation = sourceCodeLocation;
</span><span class="cx"> 
</span><del>-        this.small = true;
-
</del><span class="cx">         if (this._sourceCodeLocation)
</span><span class="cx">             this.tooltipHandledSeparately = true;
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -133,9 +133,7 @@
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> .sidebar &gt; .panel.navigation.timeline &gt; .timelines-content .close-button {
</span><del>-    margin-top: 1px;
</del><span class="cx">     width: 14px;
</span><del>-    height: 14px;
</del><span class="cx"> 
</span><span class="cx">     visibility: hidden;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -60,14 +60,15 @@
</span><span class="cx">         // The visible recording's tree element is selected when the content view changes.
</span><span class="cx">         this._recordingTreeElementMap = new Map;
</span><span class="cx">         this._recordingsTreeOutline = this.createContentTreeOutline(true, true);
</span><del>-        this._recordingsTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
</del><ins>+        this._recordingsTreeOutline.disclosureButtons = false;
</ins><span class="cx">         this._recordingsTreeOutline.hidden = true;
</span><span class="cx">         this._recordingsTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._recordingsTreeSelectionDidChange, this);
</span><span class="cx">         this._timelinesContentContainerElement.appendChild(this._recordingsTreeOutline.element);
</span><span class="cx"> 
</span><span class="cx">         // Maintain a tree outline with tree elements for each timeline of the selected recording.
</span><span class="cx">         this._timelinesTreeOutline = this.createContentTreeOutline(true, true);
</span><del>-        this._timelinesTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
</del><ins>+        this._timelinesTreeOutline.disclosureButtons = false;
+        this._timelinesTreeOutline.large = true;
</ins><span class="cx">         this._timelinesTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._timelinesTreeSelectionDidChange, this);
</span><span class="cx">         this._timelinesContentContainerElement.appendChild(this._timelinesTreeOutline.element);
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -31,12 +31,12 @@
</span><span class="cx">     bottom: 0;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.panel.navigation.timeline &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline {
</del><ins>+.panel.navigation.timeline &gt; .content &gt; .tree-outline {
</ins><span class="cx">     min-height: 100%;
</span><span class="cx">     background-image: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.panel.navigation.timeline.timeline-recording-content-view-showing &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline {
</del><ins>+.panel.navigation.timeline.timeline-recording-content-view-showing &gt; .content &gt; .tree-outline {
</ins><span class="cx">     background-image: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 0%, 0.03) 50%, hsla(0, 0%, 0%, 0.03));
</span><span class="cx">     background-size: 100% 40px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinecss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css (0 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -0,0 +1,229 @@
</span><ins>+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.tree-outline,
+.tree-outline .children {
+    padding: 0;
+    margin: 0;
+
+    outline: none;
+
+    list-style: none;
+}
+
+.tree-outline .children {
+    display: none;
+}
+
+.tree-outline .children.expanded {
+    display: block;
+}
+
+.tree-outline .item {
+    height: 20px;
+
+    padding: 0 5px;
+
+    border-top: 1px solid transparent;
+
+    white-space: nowrap;
+}
+
+.tree-outline.compact .item {
+    height: inherit;
+}
+
+.tree-outline.large .item {
+    height: 36px;
+    line-height: 34px;
+}
+
+.tree-outline.hide-disclosure-buttons &gt; .children {
+    display: none;
+}
+
+.tree-outline &gt; .children.hide-disclosure-buttons &gt; .children {
+    display: none;
+}
+
+.tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) .icon {
+    margin-left: 16px;
+}
+
+.tree-outline .item .disclosure-button {
+    display: none;
+
+    float: left;
+
+    width: 16px;
+    height: 16px;
+
+    border: 0;
+
+    background-color: transparent;
+    background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 13px 13px;
+
+    -webkit-appearance: none;
+}
+
+.tree-outline.hide-disclosure-buttons .item .disclosure-button {
+    display: none;
+}
+
+.tree-outline .item.parent .disclosure-button {
+    display: block;
+}
+
+.tree-outline:matches(:focus, .force-focus) .item.selected .disclosure-button {
+    background-image: url(../Images/DisclosureTriangles.svg#closed-selected) !important;
+}
+
+.tree-outline .item.expanded .disclosure-button {
+    background-image: url(../Images/DisclosureTriangles.svg#open-normal);
+}
+
+.tree-outline:matches(:focus, .force-focus) .item.selected.expanded .disclosure-button {
+    background-image: url(../Images/DisclosureTriangles.svg#open-selected) !important;
+}
+
+.tree-outline .item .icon {
+    float: left;
+    position: relative;
+
+    width: 16px;
+    height: 16px;
+
+    margin-top: 1px;
+    margin-right: 3px;
+}
+
+.tree-outline.compact .item .icon {
+    margin-top: 0;
+}
+
+.tree-outline.large .item .icon {
+    width: 32px;
+}
+
+.tree-outline .item .status {
+    float: right;
+
+    margin-left: 4px;
+    margin-top: 1px;
+
+    line-height: 1em;
+}
+
+.tree-outline.large .item .status {
+    margin-top: 9px;
+}
+
+.tree-outline .item .status:empty {
+    display: none;
+}
+
+.tree-outline .item.selected {
+    background-color: hsl(0, 0%, 83%);
+}
+
+.tree-outline:matches(:focus, .force-focus) .item.selected {
+    color: white;
+    background-color: hsl(209, 100%, 49%);
+}
+
+body.window-inactive .tree-outline .item.selected {
+    background-color: hsl(0, 0%, 83%);
+}
+
+.tree-outline .item .titles {
+    position: relative;
+    top: 2px;
+
+    line-height: normal;
+
+    padding-bottom: 1px;
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.tree-outline.compact .item .titles {
+    top: 0;
+}
+
+.tree-outline.large .item .titles {
+    top: 5px;
+    line-height: 11px;
+}
+
+.tree-outline .item .highlighted {
+    background-color: hsla(53, 83%, 53%, 0.2);
+    border-bottom: 1px solid hsl(47, 82%, 60%);
+}
+
+.tree-outline.large .item .titles.no-subtitle {
+    top: 10px;
+}
+
+.tree-outline .item .title::after {
+    content: &quot;\A&quot;; /* Newline */
+    white-space: pre;
+}
+
+.tree-outline .item .subtitle {
+    font-size: inherit;
+    color: hsla(0, 0%, 0%, 0.7);
+}
+
+.tree-outline.large .item .subtitle {
+    font-size: 9px;
+}
+
+.tree-outline:matches(:focus, .force-focus) .item.selected .subtitle {
+    color: hsla(0, 0%, 100%, 0.9);
+}
+
+.tree-outline .item .titles.no-subtitle .subtitle,
+.tree-outline .item .subtitle:empty {
+    display: none;
+}
+
+.tree-outline:not(.large) .item .status .indeterminate-progress-spinner {
+    margin-top: 1px;
+    width: 14px;
+    height: 14px;
+}
+
+.tree-outline .item .title::after {
+    content: &quot;&quot;;
+}
+
+.tree-outline .item .subtitle::before {
+    content: &quot; — &quot;;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -28,15 +28,16 @@
</span><span class="cx"> 
</span><span class="cx"> WebInspector.TreeOutline = class TreeOutline extends WebInspector.Object
</span><span class="cx"> {
</span><del>-    constructor(listNode)
</del><ins>+    constructor(element)
</ins><span class="cx">     {
</span><span class="cx">         super();
</span><span class="cx"> 
</span><del>-        this.element = listNode;
</del><ins>+        this.element = element || document.createElement(&quot;ol&quot;);
+        this.element.classList.add(WebInspector.TreeOutline.ElementStyleClassName);
</ins><span class="cx"> 
</span><span class="cx">         this.children = [];
</span><span class="cx">         this.selectedTreeElement = null;
</span><del>-        this._childrenListNode = listNode;
</del><ins>+        this._childrenListNode = this.element;
</ins><span class="cx">         this._childrenListNode.removeChildren();
</span><span class="cx">         this._knownTreeElements = [];
</span><span class="cx">         this._treeElementsExpandedState = [];
</span><span class="lines">@@ -47,9 +48,15 @@
</span><span class="cx">         this.selected = false;
</span><span class="cx">         this.treeOutline = this;
</span><span class="cx">         this._hidden = false;
</span><ins>+        this._compact = false;
+        this._large = false;
+        this._disclosureButtons = true;
+        this._customIndent = false;
</ins><span class="cx"> 
</span><span class="cx">         this._childrenListNode.tabIndex = 0;
</span><span class="cx">         this._childrenListNode.addEventListener(&quot;keydown&quot;, this._treeKeyDown.bind(this), true);
</span><ins>+
+        WebInspector.TreeOutline._generateStyleRulesIfNeeded();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="lines">@@ -68,6 +75,68 @@
</span><span class="cx">         this.element.hidden = this._hidden;
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    get compact()
+    {
+        return this._compact;
+    }
+
+    set compact(x)
+    {
+        if (this._compact === x)
+            return;
+
+        this._compact = x;
+        if (this._compact)
+            this.large = false;
+
+        this.element.classList.toggle(&quot;compact&quot;, this._compact);
+    }
+
+    get large()
+    {
+        return this._large;
+    }
+
+    set large(x)
+    {
+        if (this._large === x)
+            return;
+
+        this._large = x;
+        if (this._large)
+            this.compact = false;
+
+        this.element.classList.toggle(&quot;large&quot;, this._large);
+    }
+
+    get disclosureButtons()
+    {
+        return this._disclosureButtons;
+    }
+
+    set disclosureButtons(x)
+    {
+        if (this._disclosureButtons === x)
+            return;
+
+        this._disclosureButtons = x;
+        this.element.classList.toggle(&quot;hide-disclosure-buttons&quot;, !this._disclosureButtons);
+    }
+
+    get customIndent()
+    {
+        return this._customIndent;
+    }
+
+    set customIndent(x)
+    {
+        if (this._customIndent === x)
+            return;
+
+        this._customIndent = x;
+        this.element.classList.toggle(WebInspector.TreeOutline.CustomIndentStyleClassName, this._customIndent);
+    }
+
</ins><span class="cx">     appendChild(child)
</span><span class="cx">     {
</span><span class="cx">         console.assert(child);
</span><span class="lines">@@ -528,8 +597,40 @@
</span><span class="cx"> 
</span><span class="cx">         return false;
</span><span class="cx">     }
</span><ins>+
+    // Private
+
+    static _generateStyleRulesIfNeeded()
+    {
+        if (WebInspector.TreeOutline._styleElement)
+           return;
+
+        WebInspector.TreeOutline._styleElement = document.createElement(&quot;style&quot;);
+
+        let maximumTreeDepth = 32;
+        let baseLeftPadding = 5; // Matches the padding in TreeOutline.css for the item class. Keep in sync.
+        let depthPadding = 10;
+
+        let styleText = &quot;&quot;;
+        let childrenSubstring = &quot;&quot;;
+        for (let i = 1; i &lt;= maximumTreeDepth; ++i) {
+            // Keep all the elements at the same depth once the maximum is reached.
+            childrenSubstring += i === maximumTreeDepth ? &quot; .children&quot; : &quot; &gt; .children&quot;;
+            styleText += `.${WebInspector.TreeOutline.ElementStyleClassName}:not(.${WebInspector.TreeOutline.CustomIndentStyleClassName})${childrenSubstring} &gt; .item { `;
+            styleText += &quot;padding-left: &quot; + (baseLeftPadding + (depthPadding * i)) + &quot;px; }\n&quot;;
+        }
+
+        WebInspector.TreeOutline._styleElement.textContent = styleText;
+
+        document.head.appendChild(WebInspector.TreeOutline._styleElement);
+    }
</ins><span class="cx"> };
</span><span class="cx"> 
</span><ins>+WebInspector.TreeOutline._styleElement = null;
+
+WebInspector.TreeOutline.ElementStyleClassName = &quot;tree-outline&quot;;
+WebInspector.TreeOutline.CustomIndentStyleClassName = &quot;custom-indent&quot;;
+
</ins><span class="cx"> WebInspector.TreeOutline.Event = {
</span><span class="cx">     ElementAdded: Symbol(&quot;element-added&quot;),
</span><span class="cx">     ElementDidChange: Symbol(&quot;element-did-change&quot;),
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTypeTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -38,7 +38,6 @@
</span><span class="cx">         this._populated = false;
</span><span class="cx">         this._autoExpandedChildren = false;
</span><span class="cx"> 
</span><del>-        this.small = true;
</del><span class="cx">         this.toggleOnClick = true;
</span><span class="cx">         this.selectable = false;
</span><span class="cx">         this.tooltipHandledSeparately = true;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTypeTreeViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.css (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.css        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.css        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -32,7 +32,7 @@
</span><span class="cx">     font-size: 12px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.type-tree-outline {
</del><ins>+.tree-outline.type {
</ins><span class="cx">     margin: 0;
</span><span class="cx">     padding: 0 6px 2px;
</span><span class="cx">     list-style: none;
</span><span class="lines">@@ -40,7 +40,7 @@
</span><span class="cx">     outline: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.type-tree-outline li {
</del><ins>+.tree-outline.type li {
</ins><span class="cx">     white-space: nowrap;
</span><span class="cx">     text-overflow: ellipsis;
</span><span class="cx">     overflow: hidden;
</span><span class="lines">@@ -48,18 +48,18 @@
</span><span class="cx">     cursor: default;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.type-tree-outline ol {
</del><ins>+.tree-outline.type ol {
</ins><span class="cx">     display: none;
</span><span class="cx">     margin: 0;
</span><span class="cx">     -webkit-padding-start: 16px;
</span><span class="cx">     list-style: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.type-tree-outline ol.expanded {
</del><ins>+.tree-outline.type ol.expanded {
</ins><span class="cx">     display: block;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.type-tree-outline li .empty-message {
</del><ins>+.tree-outline.type li .empty-message {
</ins><span class="cx">     color: hsl(0, 0%, 60%);
</span><span class="cx">     margin-left: 13px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTypeTreeViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.js (195302 => 195303)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.js        2016-01-19 19:37:06 UTC (rev 195302)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.js        2016-01-19 19:53:16 UTC (rev 195303)
</span><span class="lines">@@ -36,10 +36,9 @@
</span><span class="cx">         this._element = document.createElement(&quot;div&quot;);
</span><span class="cx">         this._element.className = &quot;type-tree&quot;;
</span><span class="cx"> 
</span><del>-        this._outlineElement = document.createElement(&quot;ol&quot;);
-        this._outlineElement.className = &quot;type-tree-outline&quot;;
-        this._outline = new WebInspector.TreeOutline(this._outlineElement);
-        this._element.appendChild(this._outlineElement);
</del><ins>+        this._outline = new WebInspector.TreeOutline;
+        this._outline.element.classList.add(&quot;type&quot;);
+        this._element.appendChild(this._outline.element);
</ins><span class="cx"> 
</span><span class="cx">         this._populate();
</span><span class="cx"> 
</span></span></pre>
</div>
</div>

</body>
</html>