Attachment #365274 for bug #195104

View Details Raw Unified Return to Bug 195104

| Differences between



2019-03-19  Devin Rousso  <drousso@apple.com>

        Web Inspector: Sources: disabled breakpoints banner should be sticky
        https://bugs.webkit.org/show_bug.cgi?id=195104
        <rdar://problem/48442259>

        Reviewed by NOBODY (OOPS!).

        Allow each of the individual sections to be scrolled separately from the entire sidebar.

        Leverage CSS variables set via JavaScript to be able to calculate the maximum height of each
        `WI.TreeOutline` section based on the number of items.

        * UserInterface/Views/SourcesNavigationSidebarPanel.js:
        (WI.SourcesNavigationSidebarPanel):
        (WI.SourcesNavigationSidebarPanel.prototype._handleCallStackElementAddedOrRemoved.walk): Added.
        (WI.SourcesNavigationSidebarPanel.prototype._handleCallStackElementAddedOrRemoved): Added.
        (WI.SourcesNavigationSidebarPanel.prototype._handleBreakpointElementAddedOrRemoved.walk): Added.
        (WI.SourcesNavigationSidebarPanel.prototype._handleBreakpointElementAddedOrRemoved):
        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerPaused):
        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerResumed):
        * UserInterface/Views/SourcesNavigationSidebarPanel.css:
        (.sidebar > .panel.navigation.sources > .content):
        (.sidebar > .panel.navigation.sources > .content .details-section): Added.
        (.sidebar > .panel.navigation.sources > .content .details-section.paused-reason.collapsed > .header > .options,): Added.
        (.sidebar > .panel.navigation.sources > .content .details-section.collapsed > .content): Added.
        (.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container)): Added.
        (.sidebar > .panel.navigation.sources > .content > .call-stack-container): Added.
        (.sidebar > .panel.navigation.sources > .content > .breakpoints-container): Added.
        (.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint): Added.
        (.sidebar > .panel.navigation.sources > .content > .resources-container): Added.
        (.sidebar > .panel.navigation.sources > .content .tree-outline.single-thread): Added.
        (.sidebar > .panel.navigation.sources > .content .tree-outline.single-thread > .item.thread): Added.
        (@media (min-height: 600px) .sidebar > .panel.navigation.sources > .content): Added.
        (@media (min-height: 600px) .sidebar > .panel.navigation.sources > .content > .pause-reason-container): Added.
        (@media (min-height: 600px) .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container)): Added.
        (.sidebar > .panel.navigation.sources > .content > .details-section): Deleted.
        (.sidebar > .panel.navigation.sources > .content > .details-section.paused-reason.collapsed > .header > .options,): Deleted.
        (.sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content): Deleted.
        (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints > .header > .options .create-breakpoint): Deleted.
        (.sidebar > .panel.navigation.sources > .content > .tree-outline.single-thread): Deleted.
        (.sidebar > .panel.navigation.sources > .content > .tree-outline.single-thread > .item.thread): Deleted.
        (.sidebar > .panel.navigation.sources > .content > .resources): Deleted.

2019-03-19  Devin Rousso  <drousso@apple.com>

        Web Inspector: Provide $event in the console when paused on an event listener



    display: none;
}

.sidebar > .panel.navigation.sources > .content .details-section {
    padding-bottom: 1px;
    font-size: 11px;
    border-bottom: none;
}

.sidebar > .panel.navigation.sources > .content .details-section:matches(.paused-reason, .breakpoins).collapsed > .header > .options,
.sidebar > .panel.navigation.sources > .content .details-section > .content,
.sidebar > .panel.navigation.sources > .content .details-section > .content > .group {
    display: block;
}

.sidebar > .panel.navigation.sources > .content .details-section.collapsed > .content {
    display: none;
}


    border-bottom: none;
}

.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container) {
    border-bottom: 1px solid var(--border-color);
    overflow-y: auto;
}

.sidebar > .panel.navigation.sources > .content > .call-stack-container {
    /* 24px from .details-section > .header (23px height and -1px top) */
    /* 1px from .sidebar > .panel.navigation.sources > .content > .call-stack-container (border-bottom) */
    /* 5.5 to ensure that half of the next item is shown when overflowing */
    min-height: calc(25px + calc(min(var(--call-stack-count), 5.5) * 20px));
}

.sidebar > .panel.navigation.sources > .content > .breakpoints-container {
    /* 24px from `.details-section > .header` (23px height and -1px top) */
    /* 1px from .sidebar > .panel.navigation.sources > .content > .breakpoints-container (border-bottom) */
    /* 5.5 to ensure that half of the next item is shown when overflowing */
    min-height: calc(25px + calc(min(var(--breakpoints-count), 5.5) * 20px));
}

.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint {
    width: 15px;
}

.sidebar > .panel.navigation.sources > .content > .navigation-bar {
    margin-bottom: 1px;
}

.sidebar > .panel.navigation.sources > .content > .resources-container {
    overflow-y: auto;
}

.sidebar > .panel.navigation.sources > .content .tree-outline.single-thread {
    -webkit-margin-start: -10px;
}

.sidebar > .panel.navigation.sources > .content .tree-outline.single-thread > .item.thread {
    display: none;
}

@media (min-height: 600px) {
    .sidebar > .panel.navigation.sources > .content {
        display: flex;
        flex-direction: column;
        overflow-y: hidden;
    }

    .sidebar > .panel.navigation.sources > .content > .pause-reason-container {
        flex-shrink: 0;
    }

    .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container) {
        height: 100%;
    }
}

@media (prefers-dark-interface) {
    .sidebar > .panel.navigation.sources > .content > .warning-banner {
        color: var(--yellow-highlight-text-color);

Lines 101-116 WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W a/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js_sec1
- a/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js -7 / +64 lines
101	this._pauseReasonLinkContainerElement = document.createElement("span");	101	this._pauseReasonLinkContainerElement = document.createElement("span");
102	this._pauseReasonTextRow = new WI.DetailsSectionTextRow;	102	this._pauseReasonTextRow = new WI.DetailsSectionTextRow;
103	this._pauseReasonGroup = new WI.DetailsSectionGroup([this._pauseReasonTextRow]);	103	this._pauseReasonGroup = new WI.DetailsSectionGroup([this._pauseReasonTextRow]);
104	this._pauseReasonSection = new WI.DetailsSection("paused-reason", WI.UIString("Pause Reason"), [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);	104	let pauseReasonSection = new WI.DetailsSection("paused-reason", WI.UIString("Pause Reason"), [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);
		105
		106	this._pauseReasonContainer = document.createElement("div");
		107	this._pauseReasonContainer.className = "pause-reason-container";
		108	this._pauseReasonContainer.appendChild(pauseReasonSection.element);
105		109
106	this._callStackTreeOutline = this.createContentTreeOutline({suppressFiltering: true});	110	this._callStackTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
		111	this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._handleCallStackElementAddedOrRemoved, this);
		112	this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.ElementRemoved, this._handleCallStackElementAddedOrRemoved, this);
107	this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);	113	this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
108		114
109	let callStackRow = new WI.DetailsSectionRow;	115	let callStackRow = new WI.DetailsSectionRow;
110	callStackRow.element.appendChild(this._callStackTreeOutline.element);	116	callStackRow.element.appendChild(this._callStackTreeOutline.element);
111		117
112	let callStackGroup = new WI.DetailsSectionGroup([callStackRow]);	118	let callStackGroup = new WI.DetailsSectionGroup([callStackRow]);
113	this._callStackSection = new WI.DetailsSection("call-stack", WI.UIString("Call Stack"), [callStackGroup]);	119	let callStackSection = new WI.DetailsSection("call-stack", WI.UIString("Call Stack"), [callStackGroup]);
		120
		121	this._callStackContainer = document.createElement("div");
		122	this._callStackContainer.className = "call-stack-container";
		123	this._callStackContainer.appendChild(callStackSection.element);
114		124
115	this._mainTargetTreeElement = null;	125	this._mainTargetTreeElement = null;
116	this._activeCallFrameTreeElement = null;	126	this._activeCallFrameTreeElement = null;
Lines 173-179 WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W a/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js_sec2
173		183
174	let breakpointsGroup = new WI.DetailsSectionGroup([breakpointsRow]);	184	let breakpointsGroup = new WI.DetailsSectionGroup([breakpointsRow]);
175	let breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);	185	let breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
176	this.contentView.element.insertBefore(breakpointsSection.element, this.contentView.element.firstChild);	186
		187	let breakpointsContainer = this.contentView.element.insertBefore(document.createElement("div"), this.contentView.element.firstChild);
		188	breakpointsContainer.classList.add("breakpoints-container");
		189	breakpointsContainer.appendChild(breakpointsSection.element);
177		190
178	this._resourcesTreeOutline = this.contentTreeOutline;	191	this._resourcesTreeOutline = this.contentTreeOutline;
179	this._resourcesTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);	192	this._resourcesTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
Lines 202-207 WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W a/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js_sec3
202	this._resourceTypeScopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._handleResourceTypeScopeBarSelectionChanged, this);	215	this._resourceTypeScopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._handleResourceTypeScopeBarSelectionChanged, this);
203	this._resourcesNavigationBar.addNavigationItem(this._resourceTypeScopeBar);	216	this._resourcesNavigationBar.addNavigationItem(this._resourceTypeScopeBar);
204		217
		218	this._resourcesNavigationBar.addNavigationItem(new WI.FlexibleSpaceNavigationItem);
		219
		220	let resourceGroupingModeNavigationItem = new WI.ButtonNavigationItem("grouping-mode", WI.UIString("Grouping Mode"), "Images/Gear.svg", 15, 15);
		221	resourceGroupingModeNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
		222	resourceGroupingModeNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._handleResourceGroupingModeNavigationitemClicked, this);
		223	this._resourcesNavigationBar.addNavigationItem(resourceGroupingModeNavigationItem);
		224
		225	let resourcesContainer = this.contentView.element.insertBefore(document.createElement("div"), this._resourcesNavigationBar.element.nextSibling);
		226	resourcesContainer.classList.add("resources-container");
		227
		228	this._resourcesTreeOutline = this.contentTreeOutline;
		229	this._resourcesTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
		230	this._resourcesTreeOutline.includeSourceMapResourceChildren = true;
		231	resourcesContainer.appendChild(this._resourcesTreeOutline.element);
		232
205	let onlyShowResourcesWithIssuesFilterFunction = (treeElement) => {	233	let onlyShowResourcesWithIssuesFilterFunction = (treeElement) => {
206	if (treeElement.treeOutline !== this._resourcesTreeOutline)	234	if (treeElement.treeOutline !== this._resourcesTreeOutline)
207	return true;	235	return true;
Lines 1317-1322 WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W a/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js_sec4
1317	console.error("Unknown tree element", treeElement);	1345	console.error("Unknown tree element", treeElement);
1318	}	1346	}
1319		1347
		1348	_handleCallStackElementAddedOrRemoved(event)
		1349	{
		1350	function walk(parent) {
		1351	let count = 0;
		1352	if (!parent.root)
		1353	++count;
		1354
		1355	for (let child of parent.children)
		1356	count += walk(child);
		1357
		1358	// Don't count the main thread element when it's hidden.
		1359	if (parent instanceof WI.ThreadTreeElement && WI.targets.length === 1)
		1360	--count;
		1361
		1362	return count;
		1363	}
		1364	this.element.style.setProperty("--call-stack-count", walk(this._callStackTreeOutline));
		1365	}
		1366
1320	_handleBreakpointElementAddedOrRemoved(event)	1367	_handleBreakpointElementAddedOrRemoved(event)
1321	{	1368	{
1322	let treeElement = event.data.element;	1369	let treeElement = event.data.element;
Lines 1329-1334 WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W a/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js_sec5
1329		1376
1330	if (setting)	1377	if (setting)
1331	setting.value = !!treeElement.parent;	1378	setting.value = !!treeElement.parent;
		1379
		1380	function walk(parent) {
		1381	let count = 0;
		1382	if (!parent.root)
		1383	++count;
		1384	for (let child of parent.children)
		1385	count += walk(child);
		1386	return count;
		1387	}
		1388	this.element.style.setProperty("--breakpoints-count", walk(this._breakpointsTreeOutline));
1332	}	1389	}
1333		1390
1334	_handleCreateBreakpointMouseDown(event)	1391	_handleCreateBreakpointMouseDown(event)
Lines 1501-1510 WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W a/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js_sec6
1501		1558
1502	_handleDebuggerPaused(event)	1559	_handleDebuggerPaused(event)
1503	{	1560	{
1504	this.contentView.element.insertBefore(this._callStackSection.element, this.contentView.element.firstChild);	1561	this.contentView.element.insertBefore(this._callStackContainer, this.contentView.element.firstChild);
1505		1562
1506	if (this._updatePauseReason())	1563	if (this._updatePauseReason())
1507	this.contentView.element.insertBefore(this._pauseReasonSection.element, this.contentView.element.firstChild);	1564	this.contentView.element.insertBefore(this._pauseReasonContainer, this.contentView.element.firstChild);
1508		1565
1509	this._debuggerPauseResumeButtonItem.enabled = true;	1566	this._debuggerPauseResumeButtonItem.enabled = true;
1510	this._debuggerPauseResumeButtonItem.toggled = true;	1567	this._debuggerPauseResumeButtonItem.toggled = true;
Lines 1517-1525 WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W a/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js_sec7
1517		1574
1518	_handleDebuggerResumed(event)	1575	_handleDebuggerResumed(event)
1519	{	1576	{
1520	this._callStackSection.element.remove();	1577	this._callStackContainer.remove();
1521		1578
1522	this._pauseReasonSection.element.remove();	1579	this._pauseReasonContainer.remove();
1523		1580
1524	this._debuggerPauseResumeButtonItem.enabled = true;	1581	this._debuggerPauseResumeButtonItem.enabled = true;
1525	this._debuggerPauseResumeButtonItem.toggled = false;	1582	this._debuggerPauseResumeButtonItem.toggled = false;

Return to Bug 195104

Lines 1-3 a/Source/WebInspectorUI/ChangeLog_sec1
- a/Source/WebInspectorUI/ChangeLog +44 lines
		1	2019-03-19 Devin Rousso <drousso@apple.com>
		2
		3	Web Inspector: Sources: disabled breakpoints banner should be sticky
		4	https://bugs.webkit.org/show_bug.cgi?id=195104
		5	<rdar://problem/48442259>
		6
		7	Reviewed by NOBODY (OOPS!).
		8
		9	Allow each of the individual sections to be scrolled separately from the entire sidebar.
		10
		11	Leverage CSS variables set via JavaScript to be able to calculate the maximum height of each
		12	`WI.TreeOutline` section based on the number of items.
		13
		14	* UserInterface/Views/SourcesNavigationSidebarPanel.js:
		15	(WI.SourcesNavigationSidebarPanel):
		16	(WI.SourcesNavigationSidebarPanel.prototype._handleCallStackElementAddedOrRemoved.walk): Added.
		17	(WI.SourcesNavigationSidebarPanel.prototype._handleCallStackElementAddedOrRemoved): Added.
		18	(WI.SourcesNavigationSidebarPanel.prototype._handleBreakpointElementAddedOrRemoved.walk): Added.
		19	(WI.SourcesNavigationSidebarPanel.prototype._handleBreakpointElementAddedOrRemoved):
		20	(WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerPaused):
		21	(WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerResumed):
		22	* UserInterface/Views/SourcesNavigationSidebarPanel.css:
		23	(.sidebar > .panel.navigation.sources > .content):
		24	(.sidebar > .panel.navigation.sources > .content .details-section): Added.
		25	(.sidebar > .panel.navigation.sources > .content .details-section.paused-reason.collapsed > .header > .options,): Added.
		26	(.sidebar > .panel.navigation.sources > .content .details-section.collapsed > .content): Added.
		27	(.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container)): Added.
		28	(.sidebar > .panel.navigation.sources > .content > .call-stack-container): Added.
		29	(.sidebar > .panel.navigation.sources > .content > .breakpoints-container): Added.
		30	(.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint): Added.
		31	(.sidebar > .panel.navigation.sources > .content > .resources-container): Added.
		32	(.sidebar > .panel.navigation.sources > .content .tree-outline.single-thread): Added.
		33	(.sidebar > .panel.navigation.sources > .content .tree-outline.single-thread > .item.thread): Added.
		34	(@media (min-height: 600px) .sidebar > .panel.navigation.sources > .content): Added.
		35	(@media (min-height: 600px) .sidebar > .panel.navigation.sources > .content > .pause-reason-container): Added.
		36	(@media (min-height: 600px) .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container)): Added.
		37	(.sidebar > .panel.navigation.sources > .content > .details-section): Deleted.
		38	(.sidebar > .panel.navigation.sources > .content > .details-section.paused-reason.collapsed > .header > .options,): Deleted.
		39	(.sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content): Deleted.
		40	(.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints > .header > .options .create-breakpoint): Deleted.
		41	(.sidebar > .panel.navigation.sources > .content > .tree-outline.single-thread): Deleted.
		42	(.sidebar > .panel.navigation.sources > .content > .tree-outline.single-thread > .item.thread): Deleted.
		43	(.sidebar > .panel.navigation.sources > .content > .resources): Deleted.
		44
1	2019-03-19 Devin Rousso <drousso@apple.com>	45	2019-03-19 Devin Rousso <drousso@apple.com>
2		46
3	Web Inspector: Provide $event in the console when paused on an event listener	47	Web Inspector: Provide $event in the console when paused on an event listener

Lines 66-84 a/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css_sec1
- a/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css -8 / +51 lines
66	display: none;	66	display: none;
67	}	67	}
68		68
69	.sidebar > .panel.navigation.sources > .content > .details-section {	69	.sidebar > .panel.navigation.sources > .content .details-section {
70	padding-bottom: 1px;	70	padding-bottom: 1px;
71	font-size: 11px;	71	font-size: 11px;
72	border-width: 1px !important;	72	border-bottom: none;
73	}	73	}
74		74
75	.sidebar > .panel.navigation.sources > .content > .details-section.paused-reason.collapsed > .header > .options,	75	.sidebar > .panel.navigation.sources > .content .details-section:matches(.paused-reason, .breakpoins).collapsed > .header > .options,
76	.sidebar > .panel.navigation.sources > .content > .details-section > .content,	76	.sidebar > .panel.navigation.sources > .content .details-section > .content,
77	.sidebar > .panel.navigation.sources > .content > .details-section > .content > .group {	77	.sidebar > .panel.navigation.sources > .content .details-section > .content > .group {
78	display: block;	78	display: block;
79	}	79	}
80		80
81	.sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content {	81	.sidebar > .panel.navigation.sources > .content .details-section.collapsed > .content {
82	display: none;	82	display: none;
83	}	83	}
84		84
Lines 86-103 a/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css_sec2
86	border-bottom: none;	86	border-bottom: none;
87	}	87	}
88		88
		89	.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container) {
		90	border-bottom: 1px solid var(--border-color);
		91	overflow-y: auto;
		92	}
		93
		94	.sidebar > .panel.navigation.sources > .content > .call-stack-container {
		95	/* 24px from .details-section > .header (23px height and -1px top) */
		96	/* 1px from .sidebar > .panel.navigation.sources > .content > .call-stack-container (border-bottom) */
		97	/* 5.5 to ensure that half of the next item is shown when overflowing */
		98	min-height: calc(25px + calc(min(var(--call-stack-count), 5.5) * 20px));
		99	}
		100
		101	.sidebar > .panel.navigation.sources > .content > .breakpoints-container {
		102	/* 24px from `.details-section > .header` (23px height and -1px top) */
		103	/* 1px from .sidebar > .panel.navigation.sources > .content > .breakpoints-container (border-bottom) */
		104	/* 5.5 to ensure that half of the next item is shown when overflowing */
		105	min-height: calc(25px + calc(min(var(--breakpoints-count), 5.5) * 20px));
		106	}
		107
		108	.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint {
		109	width: 15px;
		110	}
		111
89	.sidebar > .panel.navigation.sources > .content > .navigation-bar {	112	.sidebar > .panel.navigation.sources > .content > .navigation-bar {
90	margin-bottom: 1px;	113	margin-bottom: 1px;
91	}	114	}
92		115
93	.sidebar > .panel.navigation.sources > .content > .tree-outline.single-thread {	116	.sidebar > .panel.navigation.sources > .content > .resources-container {
		117	overflow-y: auto;
		118	}
		119
		120	.sidebar > .panel.navigation.sources > .content .tree-outline.single-thread {
94	-webkit-margin-start: -10px;	121	-webkit-margin-start: -10px;
95	}	122	}
96		123
97	.sidebar > .panel.navigation.sources > .content > .tree-outline.single-thread > .item.thread {	124	.sidebar > .panel.navigation.sources > .content .tree-outline.single-thread > .item.thread {
98	display: none;	125	display: none;
99	}	126	}
100		127
		128	@media (min-height: 600px) {
		129	.sidebar > .panel.navigation.sources > .content {
		130	display: flex;
		131	flex-direction: column;
		132	overflow-y: hidden;
		133	}
		134
		135	.sidebar > .panel.navigation.sources > .content > .pause-reason-container {
		136	flex-shrink: 0;
		137	}
		138
		139	.sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container) {
		140	height: 100%;
		141	}
		142	}
		143
101	@media (prefers-dark-interface) {	144	@media (prefers-dark-interface) {
102	.sidebar > .panel.navigation.sources > .content > .warning-banner {	145	.sidebar > .panel.navigation.sources > .content > .warning-banner {
103	color: var(--yellow-highlight-text-color);	146	color: var(--yellow-highlight-text-color);