Web Inspector: cleanup TreeOutline class and separate styles from NavigationSidebarPanel
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 19 Jan 2016 19:53:16 +0000 (19:53 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 19 Jan 2016 19:53:16 +0000 (19:53 +0000)
https://bugs.webkit.org/show_bug.cgi?id=153146
<rdar://problem/24213071>

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 > span::after):
(.tree-outline.dom:focus li.selected > 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 > .selection::before):
(.tree-outline.dom.single-node li):
(.tree-outline.dom:focus li.selected):
(.tree-outline.dom:focus li.selected.pseudo-class-enabled > .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 > span::after): Deleted.
(.dom-tree-outline:focus li.selected > 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 > .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 > .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 > .tree-outline.dom):
(.formatted-node > .tree-outline.dom ol):
(.formatted-node > .tree-outline.dom li):
(.formatted-node > .tree-outline.dom li.hovered:not(.selected) .selection):
(.formatted-node > .dom-tree-outline): Deleted.
(.formatted-node > .dom-tree-outline ol): Deleted.
(.formatted-node > .dom-tree-outline li): Deleted.
(.formatted-node > .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 > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.layout .item .subtitle):
(.sidebar > .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 > .children): Deleted.
(.navigation-sidebar-panel-content-tree-outline > .children.hide-disclosure-buttons > .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 > .panel.navigation.network.network-grid-content-view-showing .tree-outline.network-grid .item .subtitle):
(.sidebar > .panel.navigation.network > .content > .tree-outline):
(.sidebar > .panel.navigation.network.network-grid-content-view-showing > .content > .tree-outline):
(.sidebar > .panel.navigation.network.network-grid-content-view-showing .navigation-sidebar-panel-content-tree-outline.network-grid .item .subtitle): Deleted.
(.sidebar > .panel.navigation.network > .content > .navigation-sidebar-panel-content-tree-outline): Deleted.
(.sidebar > .panel.navigation.network.network-grid-content-view-showing > .content > .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 > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.network .item .subtitle):
(.sidebar > .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 > .titles): Deleted.
(.object-tree-property > .disclosure-button): Deleted.
(.object-tree-property.parent > .disclosure-button): Deleted.
(.object-tree-property.parent.expanded > .disclosure-button): Deleted.
(.object-tree-property > .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 > .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 > .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 > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.rendering-frame .item:not(.paint-record):not(.layout-record) .subtitle):
(.sidebar > .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 > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.script .item .subtitle):
(.sidebar > .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 > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle): Deleted.
(.sidebar > .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 > .panel.navigation.timeline > .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 > .content > .tree-outline):
(.panel.navigation.timeline.timeline-recording-content-view-showing > .content > .tree-outline):
(.panel.navigation.timeline > .content > .navigation-sidebar-panel-content-tree-outline): Deleted.
(.panel.navigation.timeline.timeline-recording-content-view-showing > .content > .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 > .children):
(.tree-outline > .children.hide-disclosure-buttons > .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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@195303 268f45cc-cd09-0410-ab3c-d52691b4dbfc

51 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js
Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js
Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js
Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js
Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js
Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css
Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.js
Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js
Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js
Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js
Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js
Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js
Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.css
Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js
Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css
Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js
Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css
Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js
Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css
Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js
Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css
Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css
Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js
Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js
Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css
Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css
Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js
Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js
Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js
Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js
Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js
Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/TimelineView.css
Source/WebInspectorUI/UserInterface/Views/TreeOutline.css [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.js
Source/WebInspectorUI/UserInterface/Views/TypeTreeView.css
Source/WebInspectorUI/UserInterface/Views/TypeTreeView.js

index d9ce681..5447940 100644 (file)
@@ -1,3 +1,446 @@
+2016-01-19  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: cleanup TreeOutline class and separate styles from NavigationSidebarPanel
+        https://bugs.webkit.org/show_bug.cgi?id=153146
+        <rdar://problem/24213071>
+
+        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 > span::after):
+        (.tree-outline.dom:focus li.selected > 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 > .selection::before):
+        (.tree-outline.dom.single-node li):
+        (.tree-outline.dom:focus li.selected):
+        (.tree-outline.dom:focus li.selected.pseudo-class-enabled > .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 > span::after): Deleted.
+        (.dom-tree-outline:focus li.selected > 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 > .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 > .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 > .tree-outline.dom):
+        (.formatted-node > .tree-outline.dom ol):
+        (.formatted-node > .tree-outline.dom li):
+        (.formatted-node > .tree-outline.dom li.hovered:not(.selected) .selection):
+        (.formatted-node > .dom-tree-outline): Deleted.
+        (.formatted-node > .dom-tree-outline ol): Deleted.
+        (.formatted-node > .dom-tree-outline li): Deleted.
+        (.formatted-node > .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 > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.layout .item .subtitle):
+        (.sidebar > .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 > .children): Deleted.
+        (.navigation-sidebar-panel-content-tree-outline > .children.hide-disclosure-buttons > .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 > .panel.navigation.network.network-grid-content-view-showing .tree-outline.network-grid .item .subtitle):
+        (.sidebar > .panel.navigation.network > .content > .tree-outline):
+        (.sidebar > .panel.navigation.network.network-grid-content-view-showing > .content > .tree-outline):
+        (.sidebar > .panel.navigation.network.network-grid-content-view-showing .navigation-sidebar-panel-content-tree-outline.network-grid .item .subtitle): Deleted.
+        (.sidebar > .panel.navigation.network > .content > .navigation-sidebar-panel-content-tree-outline): Deleted.
+        (.sidebar > .panel.navigation.network.network-grid-content-view-showing > .content > .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 > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.network .item .subtitle):
+        (.sidebar > .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 > .titles): Deleted.
+        (.object-tree-property > .disclosure-button): Deleted.
+        (.object-tree-property.parent > .disclosure-button): Deleted.
+        (.object-tree-property.parent.expanded > .disclosure-button): Deleted.
+        (.object-tree-property > .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 > .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 > .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 > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.rendering-frame .item:not(.paint-record):not(.layout-record) .subtitle):
+        (.sidebar > .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 > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.script .item .subtitle):
+        (.sidebar > .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 > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle): Deleted.
+        (.sidebar > .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 > .panel.navigation.timeline > .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 > .content > .tree-outline):
+        (.panel.navigation.timeline.timeline-recording-content-view-showing > .content > .tree-outline):
+        (.panel.navigation.timeline > .content > .navigation-sidebar-panel-content-tree-outline): Deleted.
+        (.panel.navigation.timeline.timeline-recording-content-view-showing > .content > .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 > .children):
+        (.tree-outline > .children.hide-disclosure-buttons > .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.
+
 2016-01-13  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Inspector should use the last sourceURL / sourceMappingURL directive
index 5156c02..a78c5c1 100644 (file)
     <link rel="stylesheet" href="Views/TimelineView.css">
     <link rel="stylesheet" href="Views/Toolbar.css">
     <link rel="stylesheet" href="Views/TreeElementStatusButton.css">
+    <link rel="stylesheet" href="Views/TreeOutline.css">
     <link rel="stylesheet" href="Views/TypeTokenView.css">
     <link rel="stylesheet" href="Views/TypeTreeElement.css">
     <link rel="stylesheet" href="Views/TypeTreeView.css">
index 52a480d..6536799 100644 (file)
@@ -31,8 +31,6 @@ WebInspector.ApplicationCacheFrameTreeElement = class ApplicationCacheFrameTreeE
 
         super("application-cache-frame", "", "", representedObject, false);
 
-        this.small = true;
-
         this.updateTitles();
     }
 
index e68f02d..740ca2d 100644 (file)
@@ -58,7 +58,6 @@ WebInspector.BreakpointTreeElement = class BreakpointTreeElement extends WebInsp
         this._updateStatus();
 
         this.status = this._statusImageElement;
-        this.small = true;
 
         this._iconAnimationLayerElement = document.createElement("span");
         this.iconElement.appendChild(this._iconAnimationLayerElement);
index 840755e..5da914b 100644 (file)
@@ -45,8 +45,6 @@ WebInspector.CallFrameTreeElement = class CallFrameTreeElement extends WebInspec
         }
 
         this._callFrame = callFrame;
-
-        this.small = true;
     }
 
     // Public
index a6579a0..4fe2cc5 100644 (file)
@@ -35,7 +35,5 @@ WebInspector.ContentFlowTreeElement = class ContentFlowTreeElement extends WebIn
         console.assert(representedObject instanceof WebInspector.ContentFlow);
 
         super("content-flow-icon", representedObject.name, null, representedObject, false);
-
-        this.small = true;
     }
 };
index f800422..d911f73 100644 (file)
@@ -23,7 +23,7 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.dom-tree-outline {
+.tree-outline.dom {
     position: relative;
 
     padding: 0 6px;
     color: black;
 }
 
-.dom-tree-outline li.hovered:not(.selected) .selection {
+.tree-outline.dom li.hovered:not(.selected) .selection {
     background-color: hsla(209, 100%, 49%, 0.1);
 }
 
-.dom-tree-outline li .selection {
+.tree-outline.dom li .selection {
     position: absolute;
     left: 0;
     right: 0;
     z-index: -1;
 }
 
-.dom-tree-outline li.selected .selection {
+.tree-outline.dom li.selected .selection {
     background-color: hsl(0, 0%, 83%);
 }
 
-.dom-tree-outline li.elements-drag-over .selection {
+.tree-outline.dom li.elements-drag-over .selection {
     margin-top: -2px;
     border-top: 2px solid hsl(209, 100%, 49%);
 }
 
-.dom-tree-outline:focus li.selected .selection {
+.tree-outline.dom:focus li.selected .selection {
     background-color: hsl(209, 100%, 49%);
 }
 
-.dom-tree-outline li.selected > span::after {
+.tree-outline.dom li.selected > span::after {
     content: " = $0";
     color: var(--console-secondary-text-color);
     position: absolute;
     white-space: pre;
 }
 
-.dom-tree-outline:focus li.selected > span::after {
+.tree-outline.dom:focus li.selected > span::after {
     color: hsla(0, 100%, 100%, 0.7);
 }
 
-.dom-tree-outline ol {
+.tree-outline.dom ol {
     list-style-type: none;
     padding-left: 1.2em;
     margin: 0;
 }
 
-.dom-tree-outline ol.children {
+.tree-outline.dom ol.children {
     display: none;
 }
 
-.dom-tree-outline ol.children.expanded {
+.tree-outline.dom ol.children.expanded {
     display: block;
 }
 
-.dom-tree-outline li {
+.tree-outline.dom li {
     padding: 0 0 0 17px;
     word-wrap: break-word;
 }
 
-.dom-tree-outline li.pseudo-class-enabled > .selection::before {
+.tree-outline.dom li.pseudo-class-enabled > .selection::before {
     display: inline-block;
     position: absolute;
     top: 4px;
     border-radius: 50%;
 }
 
-.dom-tree-outline.single-node li {
+.tree-outline.dom.single-node li {
     padding-left: 2px;
 }
 
-.dom-tree-outline:focus li.selected {
+.tree-outline.dom:focus li.selected {
     color: white;
 }
 
-.dom-tree-outline:focus li.selected.pseudo-class-enabled > .selection::before {
+.tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection::before {
     background-color: hsl(0, 100%, 100%);
 }
 
-.dom-tree-outline:focus li.selected * {
+.tree-outline.dom:focus li.selected * {
     color: inherit;
 }
 
-.dom-tree-outline li.parent {
+.tree-outline.dom li.parent {
     margin-left: -15px;
 }
 
-.dom-tree-outline li .html-tag.close {
+.tree-outline.dom li .html-tag.close {
     margin-left: -13px;
 }
 
-.dom-tree-outline li.parent::before {
+.tree-outline.dom li.parent::before {
     float: left;
 
     content: "";
     padding-right: 2px;
 }
 
-.dom-tree-outline:focus li.parent.selected::before {
+.tree-outline.dom:focus li.parent.selected::before {
     background-image: url(../Images/DisclosureTriangles.svg#closed-selected);
 }
 
-.dom-tree-outline li.parent.expanded::before {
+.tree-outline.dom li.parent.expanded::before {
     background-image: url(../Images/DisclosureTriangles.svg#open-normal);
 }
 
-.dom-tree-outline:focus li.parent.expanded.selected::before {
+.tree-outline.dom:focus li.parent.expanded.selected::before {
     background-image: url(../Images/DisclosureTriangles.svg#open-selected);
 }
 
-.dom-tree-outline .html-text-node.large {
+.tree-outline.dom .html-text-node.large {
     display: inline-block;
     min-width: 100%;
     white-space: pre-wrap;
 }
 
-.dom-tree-outline .html-pseudo-element {
+.tree-outline.dom .html-pseudo-element {
     color: hsl(0, 59%, 41%);
 }
 
-.dom-tree-outline .html-fragment.shadow {
+.tree-outline.dom .html-fragment.shadow {
     opacity: 0.6;
 }
 
-.showing-find-banner .dom-tree-outline .search-highlight {
+.showing-find-banner .tree-outline.dom .search-highlight {
     color: black;
     background-color: hsla(53, 83%, 53%, 0.2);
     border-bottom: 1px solid hsl(47, 82%, 60%);
index 6cb28eb..2dd8bcb 100644 (file)
@@ -32,20 +32,18 @@ WebInspector.DOMTreeOutline = class DOMTreeOutline extends WebInspector.TreeOutl
 {
     constructor(omitRootDOMNode, selectEnabled, excludeRevealElementContextMenu)
     {
-        var element = document.createElement("ol");
-
-        super(element);
-
-        element.addEventListener("mousedown", this._onmousedown.bind(this), false);
-        element.addEventListener("mousemove", this._onmousemove.bind(this), false);
-        element.addEventListener("mouseout", this._onmouseout.bind(this), false);
-        element.addEventListener("dragstart", this._ondragstart.bind(this), false);
-        element.addEventListener("dragover", this._ondragover.bind(this), false);
-        element.addEventListener("dragleave", this._ondragleave.bind(this), false);
-        element.addEventListener("drop", this._ondrop.bind(this), false);
-        element.addEventListener("dragend", this._ondragend.bind(this), false);
-
-        element.classList.add("dom-tree-outline", WebInspector.SyntaxHighlightedStyleClassName);
+        super();
+
+        this.element.addEventListener("mousedown", this._onmousedown.bind(this), false);
+        this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);
+        this.element.addEventListener("mouseout", this._onmouseout.bind(this), false);
+        this.element.addEventListener("dragstart", this._ondragstart.bind(this), false);
+        this.element.addEventListener("dragover", this._ondragover.bind(this), false);
+        this.element.addEventListener("dragleave", this._ondragleave.bind(this), false);
+        this.element.addEventListener("drop", this._ondrop.bind(this), false);
+        this.element.addEventListener("dragend", this._ondragend.bind(this), false);
+
+        this.element.classList.add("dom", WebInspector.SyntaxHighlightedStyleClassName);
 
         this._includeRootDOMNode = !omitRootDOMNode;
         this._selectEnabled = selectEnabled;
index a52be35..1b976bd 100644 (file)
@@ -30,7 +30,5 @@ WebInspector.DatabaseTableTreeElement = class DatabaseTableTreeElement extends W
         console.assert(representedObject instanceof WebInspector.DatabaseTableObject);
 
         super("database-table-icon", representedObject.name, null, representedObject, false);
-
-        this.small = true;
     }
 };
index bacc942..8de7095 100644 (file)
@@ -31,7 +31,6 @@ WebInspector.DatabaseTreeElement = class DatabaseTreeElement extends WebInspecto
 
         super("database-icon", representedObject.name, null, representedObject, true);
 
-        this.small = true;
         this.hasChildren = false;
 
         // Since we are initially telling the tree element we don't have any children, make sure that we try to populate
index f5d6ee3..991595d 100644 (file)
     display: none;
 }
 
-.error-object:not(.expanded) .error-object-outline {
+.error-object:not(.expanded) .tree-outline {
     display: none;
 }
 
-.error-object-outline {
+.error-object .tree-outline {
     padding-left: 16px
 }
index b29219e..d360158 100644 (file)
@@ -40,7 +40,6 @@ WebInspector.ErrorObjectView = class ErrorObjectView extends WebInspector.Object
         previewElement.addEventListener("click", this._handlePreviewOrTitleElementClick.bind(this));
 
         this._outlineElement = this._element.appendChild(document.createElement("div"));
-        this._outlineElement.classList.add("error-object-outline");
         this._outline = new WebInspector.TreeOutline(this._outlineElement);
     }
 
index 2a08835..6ee5d82 100644 (file)
@@ -38,8 +38,6 @@ WebInspector.FolderTreeElement = class FolderTreeElement extends WebInspector.Ge
         classNames.unshift(WebInspector.FolderTreeElement.FolderIconStyleClassName);
 
         super(classNames, title, subtitle, representedObject, true);
-
-        this.small = true;
     }
 
     // No Methods or Properties
index c3fdae9..15152e1 100644 (file)
     color: hsl(0, 0%, 50%);
 }
 
-.formatted-node > .dom-tree-outline {
+.formatted-node > .tree-outline.dom {
     display: block !important;
     padding: 0;
     margin-left: -2px;
 }
 
-.formatted-node > .dom-tree-outline ol {
+.formatted-node > .tree-outline.dom ol {
     -webkit-padding-start: 1.2em;
 }
 
-.formatted-node > .dom-tree-outline li {
+.formatted-node > .tree-outline.dom li {
     -webkit-user-select: none !important;
 }
 
-.formatted-node > .dom-tree-outline li.hovered:not(.selected) .selection {
+.formatted-node > .tree-outline.dom li.hovered:not(.selected) .selection {
     display: block;
     left: -1px;
     right: -2px;
index 2aed2e0..9fad47d 100644 (file)
@@ -115,40 +115,6 @@ WebInspector.GeneralTreeElement = class GeneralTreeElement extends WebInspector.
             this._listItemNode.classList.remove(className);
     }
 
-    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);
-        }
-    }
-
     get mainTitle()
     {
         return this._mainTitle;
@@ -237,12 +203,6 @@ WebInspector.GeneralTreeElement = class GeneralTreeElement extends WebInspector.
         if (this._classNames)
             this._listItemNode.classList.add(...this._classNames);
 
-        if (this._small)
-            this._listItemNode.classList.add(WebInspector.GeneralTreeElement.SmallStyleClassName);
-
-        if (this._twoLine)
-            this._listItemNode.classList.add(WebInspector.GeneralTreeElement.TwoLineStyleClassName);
-
         this._listItemNode.appendChild(this._disclosureButton);
         this._listItemNode.appendChild(this._iconElement);
         if (this._statusElement)
@@ -370,8 +330,9 @@ WebInspector.GeneralTreeElement = class GeneralTreeElement extends WebInspector.
         // and the tool tip only cares about the text.
         let mainTitleText = this._mainTitleElement.textContent;
         let subtitleText = this._subtitleElement ? this._subtitleElement.textContent : "";
+        let large = this.treeOutline  && this.treeOutline.large;
         if (mainTitleText && subtitleText)
-            this._listItemNode.title = mainTitleText + (this._small && !this._twoLine ? " \u2014 " : "\n") + subtitleText;
+            this._listItemNode.title = mainTitleText + (large ? "\n" : " \u2014 ") + subtitleText;
         else if (mainTitleText)
             this._listItemNode.title = mainTitleText;
         else
@@ -401,8 +362,6 @@ WebInspector.GeneralTreeElement.TitlesElementStyleClassName = "titles";
 WebInspector.GeneralTreeElement.MainTitleElementStyleClassName = "title";
 WebInspector.GeneralTreeElement.SubtitleElementStyleClassName = "subtitle";
 WebInspector.GeneralTreeElement.NoSubtitleStyleClassName = "no-subtitle";
-WebInspector.GeneralTreeElement.SmallStyleClassName = "small";
-WebInspector.GeneralTreeElement.TwoLineStyleClassName = "two-line";
 
 WebInspector.GeneralTreeElement.Event = {
     MainTitleDidChange: "general-tree-element-main-title-did-change"
index ca81291..4e8bb68 100644 (file)
@@ -32,8 +32,6 @@ WebInspector.IndexedDatabaseObjectStoreIndexTreeElement = class IndexedDatabaseO
         super("database-table-icon", objectStoreIndex.name, null, objectStoreIndex, false);
 
         this._objectStoreIndex = objectStoreIndex;
-
-        this.small = true;
     }
 
     // Public
index f93d1de..1eca008 100644 (file)
@@ -32,8 +32,6 @@ WebInspector.IndexedDatabaseObjectStoreTreeElement = class IndexedDatabaseObject
         super("database-table-icon", objectStore.name, null, objectStore, !!objectStore.indexes.length);
 
         this._objectStore = objectStore;
-
-        this.small = true;
     }
 
     // Public
index e4f23fb..7ab54d6 100644 (file)
@@ -32,8 +32,6 @@ WebInspector.IndexedDatabaseTreeElement = class IndexedDatabaseTreeElement exten
         super("database-icon", indexedDatabase.name, null, indexedDatabase, !!indexedDatabase.objectStores.length);
 
         this._indexedDatabase = indexedDatabase;
-
-        this.small = true;
     }
 
     // Public
index bd7d113..63e63b5 100644 (file)
 .issue.error .icon {
     background-image: url(../Images/Error.svg);
 }
-
-.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;
-}
index cc8291a..78581a1 100644 (file)
@@ -39,7 +39,6 @@ WebInspector.IssueTreeElement = class IssueTreeElement extends WebInspector.Debu
 
         super([WebInspector.IssueTreeElement.StyleClassName, levelStyleClassName], null, null, issueMessage, false);
 
-        this.small = true;
         this._issueMessage = issueMessage;
         this._updateTitles();
 
index 2222d19..2830d3a 100644 (file)
@@ -35,6 +35,6 @@
     border-right: none;
 }
 
-.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.layout .item .subtitle {
+.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.layout .item .subtitle {
     display: none;
 }
index 7ffd8db..1344bf4 100644 (file)
@@ -32,8 +32,6 @@ WebInspector.LogTreeElement = class LogTreeElement extends WebInspector.GeneralT
         super("log-icon", WebInspector.UIString("Console"), representedObject.startDate.toLocaleTimeString(), representedObject, false);
 
         this._logObject = representedObject;
-
-        this.small = true;
     }
 
     // Public
index 4317784..2f358f3 100644 (file)
@@ -89,251 +89,3 @@ body.window-inactive .sidebar > .panel.navigation > .overflow-shadow {
     border-radius: 6px;
     padding: 5px 15px 6px;
 }
-
-.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 > .children {
-    display: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline > .children.hide-disclosure-buttons > .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: "\A"; /* 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: "";
-}
-
-.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: " — ";
-}
index 428d411..a6420df 100644 (file)
@@ -62,8 +62,6 @@ WebInspector.NavigationSidebarPanel = class NavigationSidebarPanel extends WebIn
         this._emptyContentPlaceholderElements = new Map;
         this._emptyFilterResults = new Map;
 
-        this._generateStyleRulesIfNeeded();
-
         this._shouldAutoPruneStaleTopLevelResourceTreeElements = shouldAutoPruneStaleTopLevelResourceTreeElements || false;
 
         if (this._shouldAutoPruneStaleTopLevelResourceTreeElements) {
@@ -150,7 +148,7 @@ WebInspector.NavigationSidebarPanel = class NavigationSidebarPanel extends WebIn
 
     createContentTreeOutline(dontHideByDefault, suppressFiltering)
     {
-        let contentTreeOutline = new WebInspector.TreeOutline(document.createElement("ol"));
+        let contentTreeOutline = new WebInspector.TreeOutline;
         contentTreeOutline.allowsRepeatSelection = true;
         contentTreeOutline.hidden = !dontHideByDefault;
         contentTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName);
@@ -661,31 +659,6 @@ WebInspector.NavigationSidebarPanel = class NavigationSidebarPanel extends WebIn
         this._selectedContentTreeOutline = selectedElement ? selectedElement.treeOutline : null;
     }
 
-    _generateStyleRulesIfNeeded()
-    {
-        if (WebInspector.NavigationSidebarPanel._styleElement)
-            return;
-
-        WebInspector.NavigationSidebarPanel._styleElement = document.createElement("style");
-
-        var maximumSidebarTreeDepth = 32;
-        var baseLeftPadding = 5; // Matches the padding in NavigationSidebarPanel.css for the item class. Keep in sync.
-        var depthPadding = 10;
-
-        var styleText = "";
-        var childrenSubstring = "";
-        for (var i = 1; i <= maximumSidebarTreeDepth; ++i) {
-            // Keep all the elements at the same depth once the maximum is reached.
-            childrenSubstring += i === maximumSidebarTreeDepth ? " .children" : " > .children";
-            styleText += "." + WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName + childrenSubstring + " > .item { ";
-            styleText += "padding-left: " + (baseLeftPadding + (depthPadding * i)) + "px; }\n";
-        }
-
-        WebInspector.NavigationSidebarPanel._styleElement.textContent = styleText;
-
-        document.head.appendChild(WebInspector.NavigationSidebarPanel._styleElement);
-    }
-
     _checkForStaleResourcesIfNeeded()
     {
         if (!this._checkForStaleResourcesTimeoutIdentifier || !this._shouldAutoPruneStaleTopLevelResourceTreeElements)
@@ -815,6 +788,5 @@ WebInspector.NavigationSidebarPanel.WasExpandedDuringFilteringSymbol = Symbol("w
 WebInspector.NavigationSidebarPanel.OverflowShadowElementStyleClassName = "overflow-shadow";
 WebInspector.NavigationSidebarPanel.TopOverflowShadowElementStyleClassName = "top";
 WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName = "navigation-sidebar-panel-content-tree-outline";
-WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName = "hide-disclosure-buttons";
 WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderElementStyleClassName = "empty-content-placeholder";
 WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderMessageElementStyleClassName = "message";
index d6803af..51ff788 100644 (file)
@@ -81,16 +81,16 @@ body.window-inactive .sidebar > .panel.navigation.network > .title-bar {
     display: none;
 }
 
-.sidebar > .panel.navigation.network.network-grid-content-view-showing .navigation-sidebar-panel-content-tree-outline.network-grid .item .subtitle {
+.sidebar > .panel.navigation.network.network-grid-content-view-showing .tree-outline.network-grid .item .subtitle {
     display: none;
 }
 
-.sidebar > .panel.navigation.network > .content > .navigation-sidebar-panel-content-tree-outline {
+.sidebar > .panel.navigation.network > .content > .tree-outline {
     min-height: 100%;
     background-image: none;
 }
 
-.sidebar > .panel.navigation.network.network-grid-content-view-showing > .content > .navigation-sidebar-panel-content-tree-outline {
+.sidebar > .panel.navigation.network.network-grid-content-view-showing > .content > .tree-outline {
     background-image: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 0%, 0.03) 50%, hsla(0, 0%, 0%, 0.03));
     background-size: 100% 40px;
 }
index c1f0e42..6f25ba1 100644 (file)
@@ -59,7 +59,7 @@ WebInspector.NetworkSidebarPanel = class NetworkSidebarPanel extends WebInspecto
         this._navigationBar.addNavigationItem(this._scopeBar);
 
         this.contentTreeOutline.element.classList.add("network-grid");
-        this.contentTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
+        this.contentTreeOutline.disclosureButtons = false;
 
         this.contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._contentBrowserCurrentContentViewDidChange, this);
 
index 74d8c43..838f154 100644 (file)
@@ -31,6 +31,6 @@
     bottom: 0;
 }
 
-.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.network .item .subtitle {
+.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.network .item .subtitle {
     display: none;
 }
index 4ec51ff..22bf91f 100644 (file)
@@ -31,7 +31,7 @@ WebInspector.NetworkTimelineView = class NetworkTimelineView extends WebInspecto
 
         console.assert(timeline.type === WebInspector.TimelineRecord.Type.Network);
 
-        this.navigationSidebarTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
+        this.navigationSidebarTreeOutline.disclosureButtons = false;
         this.navigationSidebarTreeOutline.element.classList.add("network");
 
         var columns = {domain: {}, type: {}, method: {}, scheme: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, requestSent: {}, latency: {}, duration: {}};
index 3da0d5a..d678c5b 100644 (file)
@@ -30,7 +30,6 @@
     margin-bottom: 1px;
 }
 
-.object-tree .object-tree-array-index > .disclosure-button,
 .object-tree .object-tree-array-index > .icon {
     display: none;
 }
@@ -50,7 +49,7 @@
 }
 
 /* An array inside an array we should reduce the padding-start. */
-.object-tree-array-index .index-value .object-tree .object-tree-outline {
+.object-tree-array-index .index-value .object-tree .tree-outline.object {
     -webkit-padding-start: 6px;
 }
 
@@ -60,6 +59,6 @@
 }
 
 /* A node inside an array we should reduce the padding-start. */
-.object-tree-array-index .index-value .formatted-node .dom-tree-outline {
+.object-tree-array-index .index-value .formatted-node .tree-outline.dom {
     -webkit-padding-start: 0px;
 }
index 0dd3cce..7bed1b2 100644 (file)
@@ -36,7 +36,6 @@ WebInspector.ObjectTreeBaseTreeElement = class ObjectTreeBaseTreeElement extends
         this._property = property;
         this._propertyPath = propertyPath;
 
-        this.small = true;
         this.toggleOnClick = true;
         this.selectable = false;
         this.tooltipHandledSeparately = true;
index e6b439f..3fd67ec 100644 (file)
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.object-tree-property {
-    margin-top: 1px;
-}
-
-.object-tree-property > .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 > .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 > .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 > .disclosure-button {
-    background-image: url(../Images/DisclosureTriangles.svg#open-normal);
-}
-
-.object-tree-property > .icon {
-    display: inline-block;
-    vertical-align: top;
-    position: relative;
-
-    width: 16px;
-    height: 16px;
-
-    margin-right: 3px;
+.tree-outline .item.object-tree-property {
+    margin-top: 0;
+    border-top: 0;
 }
 
 .object-tree-property.boolean > .icon {
     opacity: 0.6;
 }
 
-.object-tree-property.prototype-property {
+.item.object-tree-property.prototype-property {
     display: inline-block;
 
     border: 1px solid hsla(0, 0%, 0%, 0.06);
     display: none;
 }
 
-.object-tree-property.prototype-property + ol {
+.item.object-tree-property.prototype-property + ol {
     -webkit-padding-start: 0px;
 }
 
index 907d65a..6264968 100644 (file)
     width: 0px;
 }
 
-.object-tree .object-tree-outline {
+.object-tree .tree-outline.object {
     display: none;
 }
 
-.object-tree.expanded > .object-tree-outline {
+.object-tree.expanded > .tree-outline.object {
     display: block;
 }
 
-.object-tree-outline {
+.tree-outline.object {
     margin: 0;
     padding: 0 6px 2px;
     list-style: none;
@@ -88,7 +88,8 @@
     outline: none;
 }
 
-.object-tree.properties-only .object-tree-outline {
+.tree-outline.object .item,
+.object-tree.properties-only .tree-outline.object {
     padding-left: 0;
 }
 
@@ -96,7 +97,7 @@
     opacity: 1;
 }
 
-.object-tree-outline li {
+.tree-outline.object li {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     cursor: default;
 }
 
-.object-tree-outline ol {
+.tree-outline.object ol {
     display: none;
     margin: 0;
     -webkit-padding-start: 16px;
     list-style: none;
 }
 
-.object-tree-outline ol.expanded {
+.tree-outline.object ol.expanded {
     display: block;
 }
 
-.object-tree-outline li .empty-message {
+.tree-outline.object li .empty-message {
     color: hsl(0, 0%, 60%);
     margin-left: 15px;
     font-family: -apple-system, sans-serif;
index 3e8fa0f..b16bbb8 100644 (file)
@@ -70,10 +70,11 @@ WebInspector.ObjectTreeView = class ObjectTreeView extends WebInspector.Object
             this._element.appendChild(this._titleElement);
         }
 
-        this._outlineElement = document.createElement("ol");
-        this._outlineElement.className = "object-tree-outline";
-        this._outline = new WebInspector.TreeOutline(this._outlineElement);
-        this._element.appendChild(this._outlineElement);
+        this._outline = new WebInspector.TreeOutline;
+        this._outline.compact = true;
+        this._outline.customIndent = true;
+        this._outline.element.classList.add("object");
+        this._element.appendChild(this._outline.element);
 
         // FIXME: Support editable ObjectTrees.
     }
index a54cfc9..8d16d4c 100644 (file)
@@ -79,7 +79,6 @@ WebInspector.ProfileNodeTreeElement = class ProfileNodeTreeElement extends WebIn
         this._profileNode = profileNode;
         this._delegate = delegate || null;
 
-        this.small = true;
         this.shouldRefreshChildren = true;
 
         if (sourceCodeLocation)
index 389fa60..67e2b67 100644 (file)
@@ -31,6 +31,6 @@
     bottom: 0;
 }
 
-.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.rendering-frame .item:not(.paint-record):not(.layout-record) .subtitle {
+.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.rendering-frame .item:not(.paint-record):not(.layout-record) .subtitle {
     display: none;
 }
index 20c3b93..e25f343 100644 (file)
@@ -67,7 +67,7 @@ WebInspector.ResourceSidebarPanel = class ResourceSidebarPanel extends WebInspec
         this.contentTreeOutline.includeSourceMapResourceChildren = true;
 
         if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript)
-            this.contentTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
+            this.contentTreeOutline.disclosureButtons = false;
 
         if (WebInspector.frameResourceManager.mainFrame)
             this._mainFrameMainResourceDidChange(WebInspector.frameResourceManager.mainFrame);
@@ -378,7 +378,7 @@ WebInspector.ResourceSidebarPanel = class ResourceSidebarPanel extends WebInspec
     _extraDomainsActivated()
     {
         if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript)
-            this.contentTreeOutline.element.classList.remove(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
+            this.contentTreeOutline.disclosureButtons = true;
     }
 
     _scopeBarSelectionDidChange(event)
index 8797bbd..06af3d9 100644 (file)
     bottom: 0;
 }
 
-.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle {
+.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.script .item .subtitle {
     display: none;
 }
 
-.sidebar > .panel.navigation.timeline:not(.timeline-recording-content-view-showing) .navigation-sidebar-panel-content-tree-outline.script .item .alternate-subtitle {
+.sidebar > .panel.navigation.timeline:not(.timeline-recording-content-view-showing) .tree-outline.script .item .alternate-subtitle {
     display: none;
 }
 
-.navigation-sidebar-panel-content-tree-outline .item .alternate-subtitle {
+.tree-outline .item .alternate-subtitle {
     color: hsla(0, 0%, 0%, 0.7);
 }
 
-.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .alternate-subtitle {
+.tree-outline:matches(:focus, .force-focus) .item.selected .alternate-subtitle {
     color: hsla(0, 0%, 100%, 0.9);
 }
 
-.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .alternate-subtitle::before {
+.tree-outline .item.small:not(.two-line) .alternate-subtitle::before {
     content: " — ";
 }
index 6ddfaaa..15bb85d 100644 (file)
@@ -32,8 +32,6 @@ WebInspector.SearchResultTreeElement = class SearchResultTreeElement extends Web
         var title = WebInspector.SearchResultTreeElement.truncateAndHighlightTitle(representedObject.title, representedObject.searchTerm, representedObject.sourceCodeTextRange);
 
         super(representedObject.className, title, null, representedObject, false);
-
-        this.small = true;
     }
 
     // Static
index b9f2ebe..95e657d 100644 (file)
@@ -31,8 +31,6 @@ WebInspector.SourceCodeTreeElement = class SourceCodeTreeElement extends WebInsp
 
         super(classNames, title, subtitle, representedObject || sourceCode, hasChildren);
 
-        this.small = true;
-
         this._updateSourceCode(sourceCode);
     }
 
index 6286a7a..934c79c 100644 (file)
@@ -29,7 +29,6 @@ WebInspector.StorageTreeElement = class StorageTreeElement extends WebInspector.
     {
         super(classNames, title, null, representedObject, false);
 
-        this.small = true;
         this.flattened = false;
     }
 
index 8357b9d..72e1d42 100644 (file)
@@ -31,38 +31,7 @@ body.window-inactive .data-grid.timeline th {
     border-top-color: hsl(0, 0%, 85%);
 }
 
-.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 > .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 {
+.tree-outline.timeline-data-grid .item:hover {
     color: white;
     border-radius: 4px;
     box-shadow: inset hsl(207, 54%, 57%) 0 1px 0;
@@ -70,63 +39,8 @@ body.window-inactive .data-grid.timeline th {
     background-origin: padding-box;
     background-clip: padding-box;
     text-shadow: hsl(209, 41%, 34%) 0 1px 0;
-    -webkit-text-stroke: 0.4px;
 }
 
-.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: "\A"; /* 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 {
+.tree-outline.timeline-data-grid .item:hover .subtitle {
     color: white;
-}
-
-.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: "";
-}
-
-.timeline-data-grid-tree-outline .item.small:not(.two-line) .subtitle::before {
-    content: " — ";
-}
+}
\ No newline at end of file
index fd49e1b..e32c0ed 100644 (file)
@@ -450,9 +450,9 @@ WebInspector.TimelineDataGrid = class TimelineDataGrid extends WebInspector.Data
     _createPopoverContent()
     {
         if (!this._popoverCallStackTreeOutline) {
-            var contentElement = document.createElement("ol");
-            contentElement.classList.add("timeline-data-grid-tree-outline");
-            this._popoverCallStackTreeOutline = new WebInspector.TreeOutline(contentElement);
+            this._popoverCallStackTreeOutline = new WebInspector.TreeOutline;
+            this._popoverCallStackTreeOutline.disclosureButtons = false;
+            this._popoverCallStackTreeOutline.element.classList.add("timeline-data-grid");
             this._popoverCallStackTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._popoverCallStackTreeSelectionDidChange, this);
         } else
             this._popoverCallStackTreeOutline.removeChildren();
index 24472f9..b97825e 100644 (file)
@@ -60,8 +60,6 @@ WebInspector.TimelineRecordTreeElement = class TimelineRecordTreeElement extends
         this._record = timelineRecord;
         this._sourceCodeLocation = sourceCodeLocation;
 
-        this.small = true;
-
         if (this._sourceCodeLocation)
             this.tooltipHandledSeparately = true;
 
index a429ded..8611bfd 100644 (file)
@@ -133,9 +133,7 @@ body.window-inactive .sidebar > .panel.navigation.timeline > .title-bar.timeline
 }
 
 .sidebar > .panel.navigation.timeline > .timelines-content .close-button {
-    margin-top: 1px;
     width: 14px;
-    height: 14px;
 
     visibility: hidden;
 }
index 294140c..b3d6472 100644 (file)
@@ -60,14 +60,15 @@ WebInspector.TimelineSidebarPanel = class TimelineSidebarPanel extends WebInspec
         // The visible recording's tree element is selected when the content view changes.
         this._recordingTreeElementMap = new Map;
         this._recordingsTreeOutline = this.createContentTreeOutline(true, true);
-        this._recordingsTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
+        this._recordingsTreeOutline.disclosureButtons = false;
         this._recordingsTreeOutline.hidden = true;
         this._recordingsTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._recordingsTreeSelectionDidChange, this);
         this._timelinesContentContainerElement.appendChild(this._recordingsTreeOutline.element);
 
         // Maintain a tree outline with tree elements for each timeline of the selected recording.
         this._timelinesTreeOutline = this.createContentTreeOutline(true, true);
-        this._timelinesTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
+        this._timelinesTreeOutline.disclosureButtons = false;
+        this._timelinesTreeOutline.large = true;
         this._timelinesTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._timelinesTreeSelectionDidChange, this);
         this._timelinesContentContainerElement.appendChild(this._timelinesTreeOutline.element);
 
index a577f36..7f62a82 100644 (file)
     bottom: 0;
 }
 
-.panel.navigation.timeline > .content > .navigation-sidebar-panel-content-tree-outline {
+.panel.navigation.timeline > .content > .tree-outline {
     min-height: 100%;
     background-image: none;
 }
 
-.panel.navigation.timeline.timeline-recording-content-view-showing > .content > .navigation-sidebar-panel-content-tree-outline {
+.panel.navigation.timeline.timeline-recording-content-view-showing > .content > .tree-outline {
     background-image: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 0%, 0.03) 50%, hsla(0, 0%, 0%, 0.03));
     background-size: 100% 40px;
 }
diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css
new file mode 100644 (file)
index 0000000..5e624c9
--- /dev/null
@@ -0,0 +1,229 @@
+/*
+ * 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 > .children {
+    display: none;
+}
+
+.tree-outline > .children.hide-disclosure-buttons > .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: "\A"; /* 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: "";
+}
+
+.tree-outline .item .subtitle::before {
+    content: " — ";
+}
index 5dc3cb4..453dd83 100644 (file)
 
 WebInspector.TreeOutline = class TreeOutline extends WebInspector.Object
 {
-    constructor(listNode)
+    constructor(element)
     {
         super();
 
-        this.element = listNode;
+        this.element = element || document.createElement("ol");
+        this.element.classList.add(WebInspector.TreeOutline.ElementStyleClassName);
 
         this.children = [];
         this.selectedTreeElement = null;
-        this._childrenListNode = listNode;
+        this._childrenListNode = this.element;
         this._childrenListNode.removeChildren();
         this._knownTreeElements = [];
         this._treeElementsExpandedState = [];
@@ -47,9 +48,15 @@ WebInspector.TreeOutline = class TreeOutline extends WebInspector.Object
         this.selected = false;
         this.treeOutline = this;
         this._hidden = false;
+        this._compact = false;
+        this._large = false;
+        this._disclosureButtons = true;
+        this._customIndent = false;
 
         this._childrenListNode.tabIndex = 0;
         this._childrenListNode.addEventListener("keydown", this._treeKeyDown.bind(this), true);
+
+        WebInspector.TreeOutline._generateStyleRulesIfNeeded();
     }
 
     // Public
@@ -68,6 +75,68 @@ WebInspector.TreeOutline = class TreeOutline extends WebInspector.Object
         this.element.hidden = this._hidden;
     }
 
+    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("compact", 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("large", this._large);
+    }
+
+    get disclosureButtons()
+    {
+        return this._disclosureButtons;
+    }
+
+    set disclosureButtons(x)
+    {
+        if (this._disclosureButtons === x)
+            return;
+
+        this._disclosureButtons = x;
+        this.element.classList.toggle("hide-disclosure-buttons", !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);
+    }
+
     appendChild(child)
     {
         console.assert(child);
@@ -528,8 +597,40 @@ WebInspector.TreeOutline = class TreeOutline extends WebInspector.Object
 
         return false;
     }
+
+    // Private
+
+    static _generateStyleRulesIfNeeded()
+    {
+        if (WebInspector.TreeOutline._styleElement)
+           return;
+
+        WebInspector.TreeOutline._styleElement = document.createElement("style");
+
+        let maximumTreeDepth = 32;
+        let baseLeftPadding = 5; // Matches the padding in TreeOutline.css for the item class. Keep in sync.
+        let depthPadding = 10;
+
+        let styleText = "";
+        let childrenSubstring = "";
+        for (let i = 1; i <= maximumTreeDepth; ++i) {
+            // Keep all the elements at the same depth once the maximum is reached.
+            childrenSubstring += i === maximumTreeDepth ? " .children" : " > .children";
+            styleText += `.${WebInspector.TreeOutline.ElementStyleClassName}:not(.${WebInspector.TreeOutline.CustomIndentStyleClassName})${childrenSubstring} > .item { `;
+            styleText += "padding-left: " + (baseLeftPadding + (depthPadding * i)) + "px; }\n";
+        }
+
+        WebInspector.TreeOutline._styleElement.textContent = styleText;
+
+        document.head.appendChild(WebInspector.TreeOutline._styleElement);
+    }
 };
 
+WebInspector.TreeOutline._styleElement = null;
+
+WebInspector.TreeOutline.ElementStyleClassName = "tree-outline";
+WebInspector.TreeOutline.CustomIndentStyleClassName = "custom-indent";
+
 WebInspector.TreeOutline.Event = {
     ElementAdded: Symbol("element-added"),
     ElementDidChange: Symbol("element-did-change"),
index fb2e2cc..23d4a15 100644 (file)
@@ -38,7 +38,6 @@ WebInspector.TypeTreeElement = class TypeTreeElement extends WebInspector.Genera
         this._populated = false;
         this._autoExpandedChildren = false;
 
-        this.small = true;
         this.toggleOnClick = true;
         this.selectable = false;
         this.tooltipHandledSeparately = true;
index 3a13976..5639798 100644 (file)
@@ -32,7 +32,7 @@
     font-size: 12px;
 }
 
-.type-tree-outline {
+.tree-outline.type {
     margin: 0;
     padding: 0 6px 2px;
     list-style: none;
@@ -40,7 +40,7 @@
     outline: none;
 }
 
-.type-tree-outline li {
+.tree-outline.type li {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     cursor: default;
 }
 
-.type-tree-outline ol {
+.tree-outline.type ol {
     display: none;
     margin: 0;
     -webkit-padding-start: 16px;
     list-style: none;
 }
 
-.type-tree-outline ol.expanded {
+.tree-outline.type ol.expanded {
     display: block;
 }
 
-.type-tree-outline li .empty-message {
+.tree-outline.type li .empty-message {
     color: hsl(0, 0%, 60%);
     margin-left: 13px;
 }
index 769d307..1d63133 100644 (file)
@@ -36,10 +36,9 @@ WebInspector.TypeTreeView = class TypeTreeView extends WebInspector.Object
         this._element = document.createElement("div");
         this._element.className = "type-tree";
 
-        this._outlineElement = document.createElement("ol");
-        this._outlineElement.className = "type-tree-outline";
-        this._outline = new WebInspector.TreeOutline(this._outlineElement);
-        this._element.appendChild(this._outlineElement);
+        this._outline = new WebInspector.TreeOutline;
+        this._outline.element.classList.add("type");
+        this._element.appendChild(this._outline.element);
 
         this._populate();