Changeset 248480 in webkit
- Timestamp:
- Aug 9, 2019 2:59:29 PM (5 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r248454 r248480 1 2019-08-09 Devin Rousso <drousso@apple.com> 2 3 Web Inspector: Sources: increase the vertical space allocated to the call stack when paused 4 https://bugs.webkit.org/show_bug.cgi?id=200236 5 6 Reviewed by Joseph Pecoraro. 7 8 Rather than uniformly constrict the height of the Call Stack and Breakpoints sections, they 9 should "flex" based on their importance, which can likely be derived from the current state. 10 This way, it's possible to see information from each section at the same time, but still 11 have enough space in each section to be able to do something useful. 12 13 When paused, the most useful data is the call stack, so give the Call Stack section the most 14 vertical space (the Pause Reason is also important, but it usually needs very little space). 15 16 When not paused, it's likely that the user cares more about the resources with breakpoints 17 than those without, so favor the Breakpoints section. 18 19 Each section will only expand to fit it's maximum content height. 20 21 If the inspector window becomes too short, remove the "flex" entirely and have all the 22 content be part of a single scroll area instead. 23 24 * UserInterface/Views/SourcesNavigationSidebarPanel.js: 25 (WI.SourcesNavigationSidebarPanel): 26 (WI.SourcesNavigationSidebarPanel.prototype.createContentTreeOutline): 27 (WI.SourcesNavigationSidebarPanel.prototype._handleBreakpointElementAddedOrRemoved): 28 (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerPaused): 29 (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerResumed): 30 (WI.SourcesNavigationSidebarPanel.prototype._handleCallStackElementAddedOrRemoved): Deleted. 31 * UserInterface/Views/SourcesNavigationSidebarPanel.css: 32 (.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container)): Added. 33 (.sidebar > .panel.navigation.sources > .content .details-section): Added. 34 (.sidebar > .panel.navigation.sources > .content .details-section.collapsed > .header > .options, .sidebar > .panel.navigation.sources > .content .details-section:not(.collapsed) > .content, .sidebar > .panel.navigation.sources > .content .details-section:not(.collapsed) > .content > .group): Added. 35 (.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint): Added. 36 (.sidebar > .panel.navigation.sources > .content > .navigation-bar): Added. 37 (@media (min-height: 650px)): Added. 38 (.sidebar > .panel.navigation.sources > .content > .pause-reason-container): Added. 39 (.sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources)): Added. 40 (.sidebar > .panel.navigation.sources > .content > .call-stack-container): Added. 41 (.sidebar > .panel.navigation.sources > .content > .breakpoints-container): Added. 42 (.sidebar > .panel.navigation.sources > .content > .resources): Added. 43 (.sidebar > .panel.navigation.sources > .content > .breakpoints-container .tree-outline .item.event-target-window .icon): Added. 44 (.sidebar > .panel.navigation.sources > .content > .details-section): Deleted. 45 (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.paused-reason, .breakpoints).collapsed > .header > .options,): Deleted. 46 (.sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content): Deleted. 47 (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints > .header > .options .create-breakpoint): Deleted. 48 (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.pause-reason, .call-stack, .breakpoints) > .content,): Deleted. 49 (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints) > .content): Deleted. 50 (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content): Deleted. 51 (.sidebar > .panel.navigation.sources > .content > .details-section.call-stack): Deleted. 52 (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints): Deleted. 53 (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .create-breakpoint): Deleted. 54 (@media (min-height: 600px)): Deleted. 55 (.sidebar > .panel.navigation.sources > .content > .pause-reason): Deleted. 56 (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content,): Deleted. 57 (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .tree-outline .item.event-target-window .icon): Deleted. 58 Wrap the Pause Reason, Call Stack, and Breakpoints `WI.DetailsSection`s in a container 59 element so that the styling of the sticky header doesn't get affected by the clamping of the 60 container's height. 61 62 * UserInterface/Views/DetailsSection.css: 63 (.details-section): 64 (.details-section > .header): 65 Create CSS variables for styles that will be overridden by the Sources navigation sidebar. 66 1 67 2019-08-08 Devin Rousso <drousso@apple.com> 2 68 -
trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
r244902 r248480 27 27 font-size: 10px; 28 28 background-color: var(--panel-background-color); 29 border-bottom: 1px solid var(--border-color); 29 border-bottom: var(--details-section-border-bottom); 30 31 --details-section-border-bottom: 1px solid var(--border-color); 32 --details-section-header-top: -1px; 30 33 } 31 34 … … 45 48 .details-section > .header { 46 49 position: sticky; 47 top: -1px;50 top: var(--details-section-header-top); 48 51 height: 23px; 49 52 padding: 4px 0; -
trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css
r246518 r248480 66 66 } 67 67 68 .sidebar > .panel.navigation.sources > .content > .details-section { 69 padding-bottom: 1px; 70 font-size: 11px; 71 border-bottom-width: 1px !important; 68 .sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container) { 69 border-bottom: 1px solid var(--border-color); 72 70 } 73 71 74 .sidebar > .panel.navigation.sources > .content > .details-section:matches(.paused-reason, .breakpoints).collapsed > .header > .options, 75 .sidebar > .panel.navigation.sources > .content > .details-section > .content, 76 .sidebar > .panel.navigation.sources > .content > .details-section > .content > .group { 72 .sidebar > .panel.navigation.sources > .content .details-section { 73 font-size: 11px; 74 --details-section-border-bottom: none; 75 } 76 77 .sidebar > .panel.navigation.sources > .content .details-section.collapsed > .header > .options, 78 .sidebar > .panel.navigation.sources > .content .details-section:not(.collapsed) > .content, 79 .sidebar > .panel.navigation.sources > .content .details-section:not(.collapsed) > .content > .group { 77 80 display: block; 78 81 } 79 82 80 .sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content { 81 display: none; 82 } 83 84 .sidebar > .panel.navigation.sources > .content > .details-section.breakpoints > .header > .options .create-breakpoint { 85 width: 15px; 86 } 87 88 .sidebar > .panel.navigation.sources > .content > .details-section:matches(.pause-reason, .call-stack, .breakpoints) > .content, 89 .sidebar > .panel.navigation.sources > .content > .tree-outline.resources { 90 overflow-y: auto; 91 } 92 93 .sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints) > .content { 94 /* Same calculation as below, but without var(--item-count) */ 95 max-height: 110px; 96 } 97 98 .sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content { 99 /* 1px from .sidebar > .panel.navigation.sources > .content > .details-section (border-bottom) */ 100 /* 5.5 to ensure that half of the next item is shown when overflowing */ 101 min-height: calc(min(var(--item-count), 5.5) * 20px); 102 } 103 104 .sidebar > .panel.navigation.sources > .content > .details-section.call-stack { 105 --item-count: var(--call-stack-count); 106 } 107 108 .sidebar > .panel.navigation.sources > .content > .details-section.breakpoints { 109 --item-count: var(--breakpoints-count); 110 } 111 112 .sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .create-breakpoint { 83 .sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint { 113 84 width: 15px; 114 85 } 115 86 116 87 .sidebar > .panel.navigation.sources > .content > .navigation-bar { 88 position: sticky; 89 top: 0; 90 z-index: var(--z-index-header); 117 91 margin-bottom: 1px; 92 background-color: var(--panel-background-color); 118 93 } 119 94 … … 126 101 } 127 102 128 @media (min-height: 6 00px) {103 @media (min-height: 650px) { 129 104 .sidebar > .panel.navigation.sources > .content { 130 105 display: flex; … … 133 108 } 134 109 135 .sidebar > .panel.navigation.sources > .content > .pause-reason {136 flex-shrink: 0;110 .sidebar > .panel.navigation.sources > .content .details-section { 111 --details-section-header-top: 0; 137 112 } 138 113 139 .sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content, 140 .sidebar > .panel.navigation.sources > .content > .tree-outline.resources { 114 .sidebar > .panel.navigation.sources > .content > .pause-reason-container { 115 flex-grow: 4; 116 flex-shrink: 1; 117 } 118 119 .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources) { 141 120 height: 100%; 121 max-height: fit-content; 122 overflow-y: auto; 123 } 124 125 .sidebar > .panel.navigation.sources > .content > .call-stack-container { 126 flex-grow: 3; 127 flex-shrink: 2; 128 } 129 130 .sidebar > .panel.navigation.sources > .content > .breakpoints-container { 131 flex-grow: 2; 132 flex-shrink: 3; 133 } 134 135 .sidebar > .panel.navigation.sources > .content > .resources { 136 flex-grow: 1; 137 flex-shrink: 3; 142 138 } 143 139 } 144 140 145 .sidebar > .panel.navigation.sources > .content > . details-section.breakpoints.tree-outline .item.event-target-window .icon {141 .sidebar > .panel.navigation.sources > .content > .breakpoints-container .tree-outline .item.event-target-window .icon { 146 142 content: url(../Images/TypeObject.svg); 147 143 } … … 153 149 } 154 150 } 151 -
trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js
r248274 r248480 114 114 this._pauseReasonSection = new WI.DetailsSection("paused-reason", WI.UIString("Pause Reason"), [this._pauseReasonGroup], this._pauseReasonLinkContainerElement); 115 115 116 this._pauseReasonContainer = document.createElement("div"); 117 this._pauseReasonContainer.classList.add("pause-reason-container"); 118 this._pauseReasonContainer.appendChild(this._pauseReasonSection.element); 119 116 120 this._callStackTreeOutline = this.createContentTreeOutline({suppressFiltering: true}); 117 this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._handleCallStackElementAddedOrRemoved, this);118 this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.ElementRemoved, this._handleCallStackElementAddedOrRemoved, this);119 121 this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this); 120 122 … … 124 126 let callStackGroup = new WI.DetailsSectionGroup([callStackRow]); 125 127 this._callStackSection = new WI.DetailsSection("call-stack", WI.UIString("Call Stack"), [callStackGroup]); 128 129 this._callStackContainer = document.createElement("div"); 130 this._callStackContainer.classList.add("call-stack-container"); 131 this._callStackContainer.appendChild(this._callStackSection.element); 126 132 127 133 this._mainTargetTreeElement = null; … … 194 200 let breakpointsGroup = new WI.DetailsSectionGroup([breakpointsRow]); 195 201 this._breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper); 196 this.contentView.element.insertBefore(this._breakpointsSection.element, this.contentView.element.firstChild); 202 203 this._breakpointsContainer = document.createElement("div"); 204 this._breakpointsContainer.classList.add("breakpoints-container"); 205 this._breakpointsContainer.appendChild(this._breakpointsSection.element); 206 207 this.contentView.element.insertBefore(this._breakpointsContainer, this.contentView.element.firstChild); 197 208 198 209 this._resourcesNavigationBar = new WI.NavigationBar; 199 210 this.contentView.addSubview(this._resourcesNavigationBar); 200 this.contentView.element.insertBefore(this._resourcesNavigationBar.element, this._breakpoints Section.element.nextSibling);211 this.contentView.element.insertBefore(this._resourcesNavigationBar.element, this._breakpointsContainer.nextSibling); 201 212 202 213 this._resourcesNavigationBar.addNavigationItem(new WI.FlexibleSpaceNavigationItem); … … 489 500 createContentTreeOutline(options = {}) 490 501 { 491 let treeOutline = super.createContentTreeOutline(options) 502 let treeOutline = super.createContentTreeOutline(options); 492 503 493 504 treeOutline.addEventListener(WI.TreeOutline.Event.ElementRevealed, (event) => { … … 1533 1544 } 1534 1545 1535 _handleCallStackElementAddedOrRemoved(event)1536 {1537 let count = this._callStackTreeOutline.children.length;1538 for (let child of this._callStackTreeOutline.children)1539 count += child.children.length;1540 1541 // Don't count the main thread element when it is hidden.1542 if (WI.targets.length === 1)1543 --count;1544 1545 this.element.style.setProperty("--call-stack-count", count);1546 }1547 1548 1546 _handleBreakpointElementAddedOrRemoved(event) 1549 1547 { … … 1579 1577 if (setting) 1580 1578 setting.value = !!treeElement.parent; 1581 1582 let count = this._breakpointsTreeOutline.children.length;1583 for (let child of this._breakpointsTreeOutline.children)1584 count += child.children.length;1585 this.element.style.setProperty("--breakpoints-count", count);1586 1579 } 1587 1580 … … 1795 1788 _handleDebuggerPaused(event) 1796 1789 { 1797 this.contentView.element.insertBefore(this._callStack Section.element, this.contentView.element.firstChild);1790 this.contentView.element.insertBefore(this._callStackContainer, this.contentView.element.firstChild); 1798 1791 1799 1792 if (this._updatePauseReason()) 1800 this.contentView.element.insertBefore(this._pauseReason Section.element, this.contentView.element.firstChild);1793 this.contentView.element.insertBefore(this._pauseReasonContainer, this.contentView.element.firstChild); 1801 1794 1802 1795 this._debuggerPauseResumeButtonItem.enabled = true; … … 1811 1804 _handleDebuggerResumed(event) 1812 1805 { 1813 this._callStack Section.element.remove();1814 1815 this._pauseReason Section.element.remove();1806 this._callStackContainer.remove(); 1807 1808 this._pauseReasonContainer.remove(); 1816 1809 1817 1810 this._debuggerPauseResumeButtonItem.enabled = true;
Note: See TracChangeset
for help on using the changeset viewer.