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.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@195303 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index d9ce681..5447940 100644
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -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
diff --git a/Source/WebInspectorUI/UserInterface/Main.html b/Source/WebInspectorUI/UserInterface/Main.html
index 5156c02..a78c5c1 100644
--- a/Source/WebInspectorUI/UserInterface/Main.html
+++ b/Source/WebInspectorUI/UserInterface/Main.html
@@ -162,6 +162,7 @@
<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">
diff --git a/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js
index 52a480d..6536799 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js
@@ -31,8 +31,6 @@
super("application-cache-frame", "", "", representedObject, false);
- this.small = true;
-
this.updateTitles();
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
index e68f02d..740ca2d 100644
--- a/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
@@ -58,7 +58,6 @@
this._updateStatus();
this.status = this._statusImageElement;
- this.small = true;
this._iconAnimationLayerElement = document.createElement("span");
this.iconElement.appendChild(this._iconAnimationLayerElement);
diff --git a/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js
index 840755e..5da914b 100644
--- a/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js
@@ -45,8 +45,6 @@
}
this._callFrame = callFrame;
-
- this.small = true;
}
// Public
diff --git a/Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js
index a6579a0..4fe2cc5 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js
@@ -35,7 +35,5 @@
console.assert(representedObject instanceof WebInspector.ContentFlow);
super("content-flow-icon", representedObject.name, null, representedObject, false);
-
- this.small = true;
}
};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
index f800422..d911f73 100644
--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
@@ -23,7 +23,7 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-.dom-tree-outline {
+.tree-outline.dom {
position: relative;
padding: 0 6px;
@@ -39,11 +39,11 @@
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;
@@ -51,50 +51,50 @@
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;
@@ -106,31 +106,31 @@
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: "";
@@ -146,33 +146,33 @@
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%);
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
index 6cb28eb..2dd8bcb 100644
--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
@@ -32,20 +32,18 @@
{
constructor(omitRootDOMNode, selectEnabled, excludeRevealElementContextMenu)
{
- var element = document.createElement("ol");
+ super();
- super(element);
+ 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);
- 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);
+ this.element.classList.add("dom", WebInspector.SyntaxHighlightedStyleClassName);
this._includeRootDOMNode = !omitRootDOMNode;
this._selectEnabled = selectEnabled;
diff --git a/Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js
index a52be35..1b976bd 100644
--- a/Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js
@@ -30,7 +30,5 @@
console.assert(representedObject instanceof WebInspector.DatabaseTableObject);
super("database-table-icon", representedObject.name, null, representedObject, false);
-
- this.small = true;
}
};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js
index bacc942..8de7095 100644
--- a/Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js
@@ -31,7 +31,6 @@
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
diff --git a/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css b/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css
index f5d6ee3..991595d 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css
@@ -53,10 +53,10 @@
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
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.js b/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.js
index b29219e..d360158 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.js
+++ b/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.js
@@ -40,7 +40,6 @@
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);
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js
index 2a08835..6ee5d82 100644
--- a/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js
@@ -38,8 +38,6 @@
classNames.unshift(WebInspector.FolderTreeElement.FolderIconStyleClassName);
super(classNames, title, subtitle, representedObject, true);
-
- this.small = true;
}
// No Methods or Properties
diff --git a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
index c3fdae9..15152e1 100644
--- a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
+++ b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
@@ -62,21 +62,21 @@
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;
diff --git a/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js
index 2aed2e0..9fad47d 100644
--- a/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js
@@ -115,40 +115,6 @@
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 @@
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 @@
// 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.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"
diff --git a/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js
index ca81291..4e8bb68 100644
--- a/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js
@@ -32,8 +32,6 @@
super("database-table-icon", objectStoreIndex.name, null, objectStoreIndex, false);
this._objectStoreIndex = objectStoreIndex;
-
- this.small = true;
}
// Public
diff --git a/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js
index f93d1de..1eca008 100644
--- a/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js
@@ -32,8 +32,6 @@
super("database-table-icon", objectStore.name, null, objectStore, !!objectStore.indexes.length);
this._objectStore = objectStore;
-
- this.small = true;
}
// Public
diff --git a/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js
index e4f23fb..7ab54d6 100644
--- a/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js
@@ -32,8 +32,6 @@
super("database-icon", indexedDatabase.name, null, indexedDatabase, !!indexedDatabase.objectStores.length);
this._indexedDatabase = indexedDatabase;
-
- this.small = true;
}
// Public
diff --git a/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.css
index bd7d113..63e63b5 100644
--- a/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.css
+++ b/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.css
@@ -31,11 +31,3 @@
.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;
-}
diff --git a/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js
index cc8291a..78581a1 100644
--- a/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js
@@ -39,7 +39,6 @@
super([WebInspector.IssueTreeElement.StyleClassName, levelStyleClassName], null, null, issueMessage, false);
- this.small = true;
this._issueMessage = issueMessage;
this._updateTitles();
diff --git a/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css
index 2222d19..2830d3a 100644
--- a/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css
@@ -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;
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js
index 7ffd8db..1344bf4 100644
--- a/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js
@@ -32,8 +32,6 @@
super("log-icon", WebInspector.UIString("Console"), representedObject.startDate.toLocaleTimeString(), representedObject, false);
this._logObject = representedObject;
-
- this.small = true;
}
// Public
diff --git a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
index 4317784..2f358f3 100644
--- a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
@@ -89,251 +89,3 @@
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: " — ";
-}
diff --git a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
index 428d411..a6420df 100644
--- a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
@@ -62,8 +62,6 @@
this._emptyContentPlaceholderElements = new Map;
this._emptyFilterResults = new Map;
- this._generateStyleRulesIfNeeded();
-
this._shouldAutoPruneStaleTopLevelResourceTreeElements = shouldAutoPruneStaleTopLevelResourceTreeElements || false;
if (this._shouldAutoPruneStaleTopLevelResourceTreeElements) {
@@ -150,7 +148,7 @@
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 @@
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.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";
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css
index d6803af..51ff788 100644
--- a/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css
@@ -81,16 +81,16 @@
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;
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js
index c1f0e42..6f25ba1 100644
--- a/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js
@@ -59,7 +59,7 @@
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);
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css
index 74d8c43..838f154 100644
--- a/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css
@@ -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;
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js
index 4ec51ff..22bf91f 100644
--- a/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js
@@ -31,7 +31,7 @@
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: {}};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css
index 3da0d5a..d678c5b 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css
@@ -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;
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js
index 0dd3cce..7bed1b2 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js
@@ -36,7 +36,6 @@
this._property = property;
this._propertyPath = propertyPath;
- this.small = true;
this.toggleOnClick = true;
this.selectable = false;
this.tooltipHandledSeparately = true;
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css
index e6b439f..3fd67ec 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css
@@ -23,55 +23,9 @@
* 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 {
@@ -130,7 +84,7 @@
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);
@@ -149,7 +103,7 @@
display: none;
}
-.object-tree-property.prototype-property + ol {
+.item.object-tree-property.prototype-property + ol {
-webkit-padding-start: 0px;
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css
index 907d65a..6264968 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css
@@ -72,15 +72,15 @@
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;
@@ -104,18 +105,18 @@
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;
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js
index 3e8fa0f..b16bbb8 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js
@@ -70,10 +70,11 @@
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.
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js
index a54cfc9..8d16d4c 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js
@@ -79,7 +79,6 @@
this._profileNode = profileNode;
this._delegate = delegate || null;
- this.small = true;
this.shouldRefreshChildren = true;
if (sourceCodeLocation)
diff --git a/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css
index 389fa60..67e2b67 100644
--- a/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css
@@ -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;
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js
index 20c3b93..e25f343 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js
@@ -67,7 +67,7 @@
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 @@
_extraDomainsActivated()
{
if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript)
- this.contentTreeOutline.element.classList.remove(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
+ this.contentTreeOutline.disclosureButtons = true;
}
_scopeBarSelectionDidChange(event)
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css
index 8797bbd..06af3d9 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css
@@ -31,22 +31,22 @@
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: " — ";
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js
index 6ddfaaa..15bb85d 100644
--- a/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js
@@ -32,8 +32,6 @@
var title = WebInspector.SearchResultTreeElement.truncateAndHighlightTitle(representedObject.title, representedObject.searchTerm, representedObject.sourceCodeTextRange);
super(representedObject.className, title, null, representedObject, false);
-
- this.small = true;
}
// Static
diff --git a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js
index b9f2ebe..95e657d 100644
--- a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js
@@ -31,8 +31,6 @@
super(classNames, title, subtitle, representedObject || sourceCode, hasChildren);
- this.small = true;
-
this._updateSourceCode(sourceCode);
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js
index 6286a7a..934c79c 100644
--- a/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js
@@ -29,7 +29,6 @@
{
super(classNames, title, null, representedObject, false);
- this.small = true;
this.flattened = false;
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
index 8357b9d..72e1d42 100644
--- a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
@@ -31,38 +31,7 @@
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 @@
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
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js
index fd49e1b..e32c0ed 100644
--- a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js
@@ -450,9 +450,9 @@
_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();
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js
index 24472f9..b97825e 100644
--- a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js
@@ -60,8 +60,6 @@
this._record = timelineRecord;
this._sourceCodeLocation = sourceCodeLocation;
- this.small = true;
-
if (this._sourceCodeLocation)
this.tooltipHandledSeparately = true;
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css
index a429ded..8611bfd 100644
--- a/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css
@@ -133,9 +133,7 @@
}
.sidebar > .panel.navigation.timeline > .timelines-content .close-button {
- margin-top: 1px;
width: 14px;
- height: 14px;
visibility: hidden;
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js
index 294140c..b3d6472 100644
--- a/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js
@@ -60,14 +60,15 @@
// 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);
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineView.css b/Source/WebInspectorUI/UserInterface/Views/TimelineView.css
index a577f36..7f62a82 100644
--- a/Source/WebInspectorUI/UserInterface/Views/TimelineView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineView.css
@@ -31,12 +31,12 @@
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
index 0000000..5e624c9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css
@@ -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: " — ";
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
index 5dc3cb4..453dd83 100644
--- a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
@@ -28,15 +28,16 @@
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 @@
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 @@
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 @@
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"),
diff --git a/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.js
index fb2e2cc..23d4a15 100644
--- a/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.js
@@ -38,7 +38,6 @@
this._populated = false;
this._autoExpandedChildren = false;
- this.small = true;
this.toggleOnClick = true;
this.selectable = false;
this.tooltipHandledSeparately = true;
diff --git a/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.css b/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.css
index 3a13976..5639798 100644
--- a/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.css
@@ -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;
@@ -48,18 +48,18 @@
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;
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.js b/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.js
index 769d307..1d63133 100644
--- a/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.js
+++ b/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.js
@@ -36,10 +36,9 @@
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();
