Web Inspector: Sources: collapsing a section doesn't shrink the space used by that...
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 21 Mar 2019 02:23:21 +0000 (02:23 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 21 Mar 2019 02:23:21 +0000 (02:23 +0000)
https://bugs.webkit.org/show_bug.cgi?id=196045

Reviewed by Timothy Hatcher.

* UserInterface/Views/SourcesNavigationSidebarPanel.js:
(WI.SourcesNavigationSidebarPanel):
(WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerPaused):
(WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerResumed):
* UserInterface/Views/SourcesNavigationSidebarPanel.css:
(.sidebar > .panel.navigation.sources > .content > .details-section):
(.sidebar > .panel.navigation.sources > .content > .details-section:matches(.paused-reason, .breakpoins).collapsed > .header > .options,):
(.sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content):
(.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints > .header > .options .create-breakpoint):
(.sidebar > .panel.navigation.sources > .content > .details-section:matches(.pause-reason, .call-stack, .breakpoints) > .content,):
(.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints) > .content):
(.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content):
(.sidebar > .panel.navigation.sources > .content > .details-section.call-stack):
(.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints):
(.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .create-breakpoint):
(.sidebar > .panel.navigation.sources > .content > .pause-reason):
(.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content,):
(.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .tree-outline .item.event-target-window .icon):
(.sidebar > .panel.navigation.sources > .content .details-section): Deleted.
(.sidebar > .panel.navigation.sources > .content .details-section:matches(.paused-reason, .breakpoins).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 > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container)): Deleted.
(.sidebar > .panel.navigation.sources > .content > .call-stack-container): Deleted.
(.sidebar > .panel.navigation.sources > .content > .breakpoints-container): Deleted.
(.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint): Deleted.
(.sidebar > .panel.navigation.sources > .content > .resources-container): Deleted.
(.sidebar > .panel.navigation.sources > .content > .pause-reason-container): Deleted.
(.sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container)): Deleted.
(.sidebar > .panel.navigation.sources > .content > .breakpoints .tree-outline .item.event-target-window .icon): Deleted.
 - Apply the overflow scrolling to the content element of each `WI.DetailsSection`.
 - Ensure that there is a maximum height for each section.
 - When `.collapsed`, don't try to grow/shrink the section based on its contents.

* UserInterface/Views/CallFrameTreeElement.css:
(.tree-outline .item.call-frame):
(.tree-outline .item.call-frame .status):
Make the container of the active call frame status indicator relatively positioned so that
the active call frame status indicator will follow the container when scrolling.

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

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

index b5ab3ff..29dc77f 100644 (file)
@@ -1,5 +1,52 @@
 2019-03-20  Devin Rousso  <drousso@apple.com>
 
+        Web Inspector: Sources: collapsing a section doesn't shrink the space used by that section
+        https://bugs.webkit.org/show_bug.cgi?id=196045
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/SourcesNavigationSidebarPanel.js:
+        (WI.SourcesNavigationSidebarPanel):
+        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerPaused):
+        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerResumed):
+        * UserInterface/Views/SourcesNavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation.sources > .content > .details-section):
+        (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.paused-reason, .breakpoins).collapsed > .header > .options,):
+        (.sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content):
+        (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints > .header > .options .create-breakpoint):
+        (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.pause-reason, .call-stack, .breakpoints) > .content,):
+        (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints) > .content):
+        (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content):
+        (.sidebar > .panel.navigation.sources > .content > .details-section.call-stack):
+        (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints):
+        (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .create-breakpoint):
+        (.sidebar > .panel.navigation.sources > .content > .pause-reason):
+        (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content,):
+        (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .tree-outline .item.event-target-window .icon):
+        (.sidebar > .panel.navigation.sources > .content .details-section): Deleted.
+        (.sidebar > .panel.navigation.sources > .content .details-section:matches(.paused-reason, .breakpoins).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 > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container)): Deleted.
+        (.sidebar > .panel.navigation.sources > .content > .call-stack-container): Deleted.
+        (.sidebar > .panel.navigation.sources > .content > .breakpoints-container): Deleted.
+        (.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint): Deleted.
+        (.sidebar > .panel.navigation.sources > .content > .resources-container): Deleted.
+        (.sidebar > .panel.navigation.sources > .content > .pause-reason-container): Deleted.
+        (.sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container)): Deleted.
+        (.sidebar > .panel.navigation.sources > .content > .breakpoints .tree-outline .item.event-target-window .icon): Deleted.
+         - Apply the overflow scrolling to the content element of each `WI.DetailsSection`.
+         - Ensure that there is a maximum height for each section.
+         - When `.collapsed`, don't try to grow/shrink the section based on its contents.
+
+        * UserInterface/Views/CallFrameTreeElement.css:
+        (.tree-outline .item.call-frame):
+        (.tree-outline .item.call-frame .status):
+        Make the container of the active call frame status indicator relatively positioned so that
+        the active call frame status indicator will follow the container when scrolling.
+
+2019-03-20  Devin Rousso  <drousso@apple.com>
+
         Web Inspector: Timeline should show when events preventDefault() was called on an event or not
         https://bugs.webkit.org/show_bug.cgi?id=176824
         <rdar://problem/34290931>
index 052e459..e4ee447 100644 (file)
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+.tree-outline .item.call-frame {
+    position: relative;
+}
+
 .tree-outline .item.call-frame .status {
     position: absolute;
     float: none;
     -webkit-margin-start: 1px;
 
-    --call-frame-status-start: 1px;
+    --call-frame-status-start: 11px;
 }
 
 body[dir=ltr] .tree-outline .item.call-frame .status {
index ff8d7ce..3a64e61 100644 (file)
     display: none;
 }
 
-.sidebar > .panel.navigation.sources > .content .details-section {
+.sidebar > .panel.navigation.sources > .content .details-section {
     padding-bottom: 1px;
     font-size: 11px;
-    border-bottom: none;
+    border-bottom-width: 1px !important;
 }
 
-.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 {
+.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);
+.sidebar > .panel.navigation.sources > .content > .details-section:matches(.pause-reason, .call-stack, .breakpoints) > .content,
+.sidebar > .panel.navigation.sources > .content > .tree-outline.resources {
     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 > .details-section:matches(.call-stack, .breakpoints) > .content {
+    /* Same calculation as below, but without var(--item-count) */
+    max-height: 110px;
 }
 
-.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) */
+.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content {
+    /* 1px from .sidebar > .panel.navigation.sources > .content > .details-section (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));
+    min-height: calc(min(var(--item-count), 5.5) * 20px);
 }
 
-.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint {
+.sidebar > .panel.navigation.sources > .content > .details-section.call-stack {
+    --item-count: var(--call-stack-count);
+}
+
+.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints {
+    --item-count: var(--breakpoints-count);
+}
+
+.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .create-breakpoint {
     width: 15px;
 }
 
     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;
 }
         overflow-y: hidden;
     }
 
-    .sidebar > .panel.navigation.sources > .content > .pause-reason-container {
+    .sidebar > .panel.navigation.sources > .content > .pause-reason {
         flex-shrink: 0;
     }
 
-    .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container) {
+    .sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content,
+    .sidebar > .panel.navigation.sources > .content > .tree-outline.resources {
         height: 100%;
     }
 }
 
-.sidebar > .panel.navigation.sources > .content > .breakpoints .tree-outline .item.event-target-window .icon {
+.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .tree-outline .item.event-target-window .icon {
     content: url(../Images/TypeObject.svg);
 }
 
index 011ea52..7223f70 100644 (file)
@@ -111,11 +111,7 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
         this._pauseReasonLinkContainerElement = document.createElement("span");
         this._pauseReasonTextRow = new WI.DetailsSectionTextRow;
         this._pauseReasonGroup = new WI.DetailsSectionGroup([this._pauseReasonTextRow]);
-        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._pauseReasonSection = new WI.DetailsSection("paused-reason", WI.UIString("Pause Reason"), [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);
 
         this._callStackTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
         this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._handleCallStackElementAddedOrRemoved, this);
@@ -126,11 +122,7 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
         callStackRow.element.appendChild(this._callStackTreeOutline.element);
 
         let callStackGroup = new WI.DetailsSectionGroup([callStackRow]);
-        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._callStackSection = new WI.DetailsSection("call-stack", WI.UIString("Call Stack"), [callStackGroup]);
 
         this._mainTargetTreeElement = null;
         this._activeCallFrameTreeElement = null;
@@ -200,15 +192,12 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
         breakpointNavigationBar.addNavigationItem(this._createBreakpointButton);
 
         let breakpointsGroup = new WI.DetailsSectionGroup([breakpointsRow]);
-        let breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
-
-        let breakpointsContainer = this.contentView.element.insertBefore(document.createElement("div"), this.contentView.element.firstChild);
-        breakpointsContainer.classList.add("breakpoints-container");
-        breakpointsContainer.appendChild(breakpointsSection.element);
+        this._breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
+        this.contentView.element.insertBefore(this._breakpointsSection.element, this.contentView.element.firstChild);
 
         this._resourcesNavigationBar = new WI.NavigationBar;
         this.contentView.addSubview(this._resourcesNavigationBar);
-        this.contentView.element.insertBefore(this._resourcesNavigationBar.element, breakpointsSection.nextSibling);
+        this.contentView.element.insertBefore(this._resourcesNavigationBar.element, this._breakpointsSection.element.nextSibling);
 
         this._resourcesNavigationBar.addNavigationItem(new WI.FlexibleSpaceNavigationItem);
 
@@ -233,13 +222,11 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
         resourceGroupingModeNavigationItem.element.addEventListener("mousedown", this._handleResourceGroupingModeMouseDown.bind(this));
         this._resourcesNavigationBar.addNavigationItem(resourceGroupingModeNavigationItem);
 
-        let resourcesContainer = this.contentView.element.insertBefore(document.createElement("div"), this._resourcesNavigationBar.element.nextSibling);
-        resourcesContainer.classList.add("resources-container");
-
         this._resourcesTreeOutline = this.contentTreeOutline;
+        this._resourcesTreeOutline.element.classList.add("resources");
         this._resourcesTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
         this._resourcesTreeOutline.includeSourceMapResourceChildren = true;
-        resourcesContainer.appendChild(this._resourcesTreeOutline.element);
+        this.contentView.element.insertBefore(this._resourcesTreeOutline.element, this._resourcesNavigationBar.element.nextSibling);
 
         let onlyShowResourcesWithIssuesFilterFunction = (treeElement) => {
             if (treeElement.treeOutline !== this._resourcesTreeOutline)
@@ -1697,10 +1684,10 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
 
     _handleDebuggerPaused(event)
     {
-        this.contentView.element.insertBefore(this._callStackContainer, this.contentView.element.firstChild);
+        this.contentView.element.insertBefore(this._callStackSection.element, this.contentView.element.firstChild);
 
         if (this._updatePauseReason())
-            this.contentView.element.insertBefore(this._pauseReasonContainer, this.contentView.element.firstChild);
+            this.contentView.element.insertBefore(this._pauseReasonSection.element, this.contentView.element.firstChild);
 
         this._debuggerPauseResumeButtonItem.enabled = true;
         this._debuggerPauseResumeButtonItem.toggled = true;
@@ -1713,9 +1700,9 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
 
     _handleDebuggerResumed(event)
     {
-        this._callStackContainer.remove();
+        this._callStackSection.element.remove();
 
-        this._pauseReasonContainer.remove();
+        this._pauseReasonSection.element.remove();
 
         this._debuggerPauseResumeButtonItem.enabled = true;
         this._debuggerPauseResumeButtonItem.toggled = false;