Modified: trunk/Source/WebInspectorUI/ChangeLog (243224 => 243225)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-03-20 19:11:01 UTC (rev 243224)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-03-20 19:37:16 UTC (rev 243225)
@@ -1,5 +1,47 @@
2019-03-20 Devin Rousso <[email protected]>
+ Web Inspector: Sources: disabled breakpoints banner should be sticky
+ https://bugs.webkit.org/show_bug.cgi?id=195104
+ <rdar://problem/48442259>
+
+ Reviewed by Timothy Hatcher.
+
+ 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): 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-20 Devin Rousso <[email protected]>
+
"Reveal in Layers Tab" context menu option should not be available if the Layers Tab has not been enabled
https://bugs.webkit.org/show_bug.cgi?id=196009
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css (243224 => 243225)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css 2019-03-20 19:11:01 UTC (rev 243224)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css 2019-03-20 19:37:16 UTC (rev 243225)
@@ -24,8 +24,6 @@
*/
.sidebar > .panel.navigation.sources > .content {
- display: flex;
- flex-direction: column;
top: var(--navigation-bar-height);
}
@@ -68,34 +66,55 @@
display: none;
}
-.sidebar > .panel.navigation.sources > .content > .details-section {
+.sidebar > .panel.navigation.sources > .content .details-section {
padding-bottom: 1px;
font-size: 11px;
- border-width: 1px !important;
+ border-bottom: none;
}
-.sidebar > .panel.navigation.sources > .content > .details-section.paused-reason.collapsed > .header > .options,
-.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints.collapsed > .header > .options,
-.sidebar > .panel.navigation.sources > .content > .details-section > .content,
-.sidebar > .panel.navigation.sources > .content > .details-section > .content > .group {
+.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 {
+.sidebar > .panel.navigation.sources > .content .details-section.collapsed > .content {
display: none;
}
-.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints > .header > .options .create-breakpoint {
+.sidebar > .panel.navigation.sources > .content .details-section.breakpoints > .header > .options .create-breakpoint {
width: 15px;
}
+.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 {
- position: relative;
- height: 100%;
+.sidebar > .panel.navigation.sources > .content > .resources-container {
+ overflow-y: auto;
}
.sidebar > .panel.navigation.sources > .content .tree-outline.single-thread {
@@ -106,6 +125,22 @@
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);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js (243224 => 243225)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js 2019-03-20 19:11:01 UTC (rev 243224)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js 2019-03-20 19:37:16 UTC (rev 243225)
@@ -111,9 +111,15 @@
this._pauseReasonLinkContainerElement = document.createElement("span");
this._pauseReasonTextRow = new WI.DetailsSectionTextRow;
this._pauseReasonGroup = new WI.DetailsSectionGroup([this._pauseReasonTextRow]);
- this._pauseReasonSection = new WI.DetailsSection("paused-reason", WI.UIString("Pause Reason"), [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);
+ let pauseReasonSection = new WI.DetailsSection("paused-reason", WI.UIString("Pause Reason"), [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);
+ this._pauseReasonContainer = document.createElement("div");
+ this._pauseReasonContainer.className = "pause-reason-container";
+ this._pauseReasonContainer.appendChild(pauseReasonSection.element);
+
this._callStackTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
+ this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._handleCallStackElementAddedOrRemoved, this);
+ this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.ElementRemoved, this._handleCallStackElementAddedOrRemoved, this);
this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
let callStackRow = new WI.DetailsSectionRow;
@@ -120,8 +126,12 @@
callStackRow.element.appendChild(this._callStackTreeOutline.element);
let callStackGroup = new WI.DetailsSectionGroup([callStackRow]);
- this._callStackSection = new WI.DetailsSection("call-stack", WI.UIString("Call Stack"), [callStackGroup]);
+ let callStackSection = new WI.DetailsSection("call-stack", WI.UIString("Call Stack"), [callStackGroup]);
+ this._callStackContainer = document.createElement("div");
+ this._callStackContainer.className = "call-stack-container";
+ this._callStackContainer.appendChild(callStackSection.element);
+
this._mainTargetTreeElement = null;
this._activeCallFrameTreeElement = null;
@@ -183,8 +193,11 @@
let breakpointsGroup = new WI.DetailsSectionGroup([breakpointsRow]);
let breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
- this.contentView.element.insertBefore(breakpointsSection.element, this.contentView.element.firstChild);
+ let breakpointsContainer = this.contentView.element.insertBefore(document.createElement("div"), this.contentView.element.firstChild);
+ breakpointsContainer.classList.add("breakpoints-container");
+ breakpointsContainer.appendChild(breakpointsSection.element);
+
this._resourcesNavigationBar = new WI.NavigationBar;
this.contentView.addSubview(this._resourcesNavigationBar);
this.contentView.element.insertBefore(this._resourcesNavigationBar.element, breakpointsSection.nextSibling);
@@ -213,7 +226,7 @@
this._resourcesNavigationBar.addNavigationItem(resourceGroupingModeNavigationItem);
let resourcesContainer = this.contentView.element.insertBefore(document.createElement("div"), this._resourcesNavigationBar.element.nextSibling);
- resourcesContainer.classList.add("resources");
+ resourcesContainer.classList.add("resources-container");
this._resourcesTreeOutline = this.contentTreeOutline;
this._resourcesTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
@@ -1421,6 +1434,19 @@
console.error("Unknown tree element", treeElement);
}
+ _handleCallStackElementAddedOrRemoved(event)
+ {
+ let count = this._callStackTreeOutline.children.length;
+ for (let child of this._callStackTreeOutline.children)
+ count += child.children.length;
+
+ // Don't count the main thread element when it is hidden.
+ if (WI.targets.length === 1)
+ --count;
+
+ this.element.style.setProperty("--call-stack-count", count);
+ }
+
_handleBreakpointElementAddedOrRemoved(event)
{
let treeElement = event.data.element;
@@ -1433,6 +1459,11 @@
if (setting)
setting.value = !!treeElement.parent;
+
+ let count = this._breakpointsTreeOutline.children.length;
+ for (let child of this._breakpointsTreeOutline.children)
+ count += child.children.length;
+ this.element.style.setProperty("--breakpoints-count", count);
}
_handleCreateBreakpointMouseDown(event)
@@ -1635,10 +1666,10 @@
_handleDebuggerPaused(event)
{
- this.contentView.element.insertBefore(this._callStackSection.element, this.contentView.element.firstChild);
+ this.contentView.element.insertBefore(this._callStackContainer, this.contentView.element.firstChild);
if (this._updatePauseReason())
- this.contentView.element.insertBefore(this._pauseReasonSection.element, this.contentView.element.firstChild);
+ this.contentView.element.insertBefore(this._pauseReasonContainer, this.contentView.element.firstChild);
this._debuggerPauseResumeButtonItem.enabled = true;
this._debuggerPauseResumeButtonItem.toggled = true;
@@ -1651,9 +1682,9 @@
_handleDebuggerResumed(event)
{
- this._callStackSection.element.remove();
+ this._callStackContainer.remove();
- this._pauseReasonSection.element.remove();
+ this._pauseReasonContainer.remove();
this._debuggerPauseResumeButtonItem.enabled = true;
this._debuggerPauseResumeButtonItem.toggled = false;
