- Revision
- 243271
- Author
- [email protected]
- Date
- 2019-03-20 19:23:21 -0700 (Wed, 20 Mar 2019)
Log Message
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.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (243270 => 243271)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-03-21 01:24:52 UTC (rev 243270)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-03-21 02:23:21 UTC (rev 243271)
@@ -1,5 +1,52 @@
2019-03-20 Devin Rousso <[email protected]>
+ 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 <[email protected]>
+
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>
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css (243270 => 243271)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css 2019-03-21 01:24:52 UTC (rev 243270)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css 2019-03-21 02:23:21 UTC (rev 243271)
@@ -23,12 +23,16 @@
* 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 {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css (243270 => 243271)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css 2019-03-21 01:24:52 UTC (rev 243270)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css 2019-03-21 02:23:21 UTC (rev 243271)
@@ -66,46 +66,51 @@
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;
}
@@ -113,10 +118,6 @@
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;
}
@@ -132,16 +133,17 @@
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);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js (243270 => 243271)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js 2019-03-21 01:24:52 UTC (rev 243270)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js 2019-03-21 02:23:21 UTC (rev 243271)
@@ -111,12 +111,8 @@
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._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);
@@ -126,12 +122,8 @@
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._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;
@@ -200,15 +192,12 @@
breakpointNavigationBar.addNavigationItem(this._createBreakpointButton);
let breakpointsGroup = new WI.DetailsSectionGroup([breakpointsRow]);
- let breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
+ this._breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
+ this.contentView.element.insertBefore(this._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);
+ this.contentView.element.insertBefore(this._resourcesNavigationBar.element, this._breakpointsSection.element.nextSibling);
this._resourcesNavigationBar.addNavigationItem(new WI.FlexibleSpaceNavigationItem);
@@ -233,13 +222,11 @@
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 @@
_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 @@
_handleDebuggerResumed(event)
{
- this._callStackContainer.remove();
+ this._callStackSection.element.remove();
- this._pauseReasonContainer.remove();
+ this._pauseReasonSection.element.remove();
this._debuggerPauseResumeButtonItem.enabled = true;
this._debuggerPauseResumeButtonItem.toggled = false;
