Web Inspector: Sources: disabled breakpoints banner should be sticky
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 20 Mar 2019 19:37:16 +0000 (19:37 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 20 Mar 2019 19:37:16 +0000 (19:37 +0000)
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.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js

index 8905fb9..52551b8 100644 (file)
@@ -1,5 +1,47 @@
 2019-03-20  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 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  <drousso@apple.com>
+
         "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
 
index dd57638..6a4449f 100644 (file)
@@ -24,8 +24,6 @@
  */
 
 .sidebar > .panel.navigation.sources > .content {
-    display: flex;
-    flex-direction: column;
     top: var(--navigation-bar-height);
 }
 
     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;
 }
 
     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 {
     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);
index 1187d8c..0bba28a 100644 (file)
@@ -111,16 +111,26 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
         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;
         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,7 +193,10 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
 
         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);
@@ -213,7 +226,7 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
         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 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
         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 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
 
         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 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
 
     _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 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
 
     _handleDebuggerResumed(event)
     {
-        this._callStackSection.element.remove();
+        this._callStackContainer.remove();
 
-        this._pauseReasonSection.element.remove();
+        this._pauseReasonContainer.remove();
 
         this._debuggerPauseResumeButtonItem.enabled = true;
         this._debuggerPauseResumeButtonItem.toggled = false;