- Revision
- 246026
- Author
- mattba...@apple.com
- Date
- 2019-06-02 17:05:10 -0700 (Sun, 02 Jun 2019)
Log Message
Web Inspector: Debugger: sidebar should always reveal active call frame when hitting a breakpoint
https://bugs.webkit.org/show_bug.cgi?id=198228
<rdar://problem/46719447>
Reviewed by Devin Rousso.
Reveal the active call frame TreeElement when call frames change. Refreshing
the current target's ThreadTreeElement children is insufficient, since
the sidebar panel content may have been scrolled.
This patch also introduces a workaround to prevent the DetailsSection header
element, which has sticky positioning, from covering a revealed TreeElement.
This can be the case when the TreeElement being revealed is at the topmost edge
of the scrolled content element.
* UserInterface/Base/Utilities.js:
* UserInterface/Views/DebuggerSidebarPanel.js:
(WI.DebuggerSidebarPanel.prototype.createContentTreeOutline):
(WI.DebuggerSidebarPanel.prototype._debuggerCallFramesDidChange):
* UserInterface/Views/DetailsSection.js:
(WI.DetailsSection.prototype.get element):
(WI.DetailsSection.prototype.get headerElement):
(WI.DetailsSection.prototype.get identifier):
* UserInterface/Views/SourcesNavigationSidebarPanel.js:
(WI.SourcesNavigationSidebarPanel.prototype.createContentTreeOutline):
(WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerCallFramesDidChange):
* UserInterface/Views/TreeElement.js:
(WI.TreeElement.prototype.reveal):
* UserInterface/Views/TreeOutline.js:
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (246025 => 246026)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-06-02 23:34:36 UTC (rev 246025)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-06-03 00:05:10 UTC (rev 246026)
@@ -1,3 +1,39 @@
+2019-06-02 Matt Baker <mattba...@apple.com>
+
+ Web Inspector: Debugger: sidebar should always reveal active call frame when hitting a breakpoint
+ https://bugs.webkit.org/show_bug.cgi?id=198228
+ <rdar://problem/46719447>
+
+ Reviewed by Devin Rousso.
+
+ Reveal the active call frame TreeElement when call frames change. Refreshing
+ the current target's ThreadTreeElement children is insufficient, since
+ the sidebar panel content may have been scrolled.
+
+ This patch also introduces a workaround to prevent the DetailsSection header
+ element, which has sticky positioning, from covering a revealed TreeElement.
+ This can be the case when the TreeElement being revealed is at the topmost edge
+ of the scrolled content element.
+
+ * UserInterface/Base/Utilities.js:
+
+ * UserInterface/Views/DebuggerSidebarPanel.js:
+ (WI.DebuggerSidebarPanel.prototype.createContentTreeOutline):
+ (WI.DebuggerSidebarPanel.prototype._debuggerCallFramesDidChange):
+
+ * UserInterface/Views/DetailsSection.js:
+ (WI.DetailsSection.prototype.get element):
+ (WI.DetailsSection.prototype.get headerElement):
+ (WI.DetailsSection.prototype.get identifier):
+
+ * UserInterface/Views/SourcesNavigationSidebarPanel.js:
+ (WI.SourcesNavigationSidebarPanel.prototype.createContentTreeOutline):
+ (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerCallFramesDidChange):
+
+ * UserInterface/Views/TreeElement.js:
+ (WI.TreeElement.prototype.reveal):
+ * UserInterface/Views/TreeOutline.js:
+
2019-06-02 Devin Rousso <drou...@apple.com>
Web Inspector: propagate whether to show prototype information to subobject views
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js (246025 => 246026)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js 2019-06-02 23:34:36 UTC (rev 246025)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js 2019-06-03 00:05:10 UTC (rev 246026)
@@ -388,6 +388,14 @@
}
});
+Object.defineProperty(Element.prototype, "totalOffsetBottom",
+{
+ get()
+ {
+ return this.getBoundingClientRect().bottom;
+ }
+});
+
Object.defineProperty(Element.prototype, "removeChildren",
{
value()
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js (246025 => 246026)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js 2019-06-02 23:34:36 UTC (rev 246025)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js 2019-06-03 00:05:10 UTC (rev 246026)
@@ -161,8 +161,8 @@
breakpointNavigationBar.addNavigationItem(this._createBreakpointButton);
let breakpointsGroup = new WI.DetailsSectionGroup([breakpointsRow]);
- let breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
- this.contentView.element.appendChild(breakpointsSection.element);
+ this._breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
+ this.contentView.element.appendChild(this._breakpointsSection.element);
this._breakpointsContentTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._handleBreakpointElementAddedOrRemoved, this);
this._breakpointsContentTreeOutline.addEventListener(WI.TreeOutline.Event.ElementRemoved, this._handleBreakpointElementAddedOrRemoved, this);
@@ -329,6 +329,29 @@
return this._addScript(representedObject);
}
+ createContentTreeOutline(options = {})
+ {
+ let treeOutline = super.createContentTreeOutline(options)
+
+ treeOutline.addEventListener(WI.TreeOutline.Event.ElementRevealed, (event) => {
+ let treeElement = event.data.element;
+ let detailsSections = [this._pauseReasonSection, this._callStackSection, this._breakpointsSection, this._scriptsSection];
+ let detailsSection = detailsSections.find((detailsSection) => detailsSection.element.contains(treeElement.listItemElement));
+ if (!detailsSection)
+ return;
+
+ // Revealing a TreeElement at the scroll container's topmost edge with
+ // scrollIntoViewIfNeeded may result in the element being covered by the
+ // DetailsSection header, which uses sticky positioning. Detect this case,
+ // and adjust the sidebar content's scroll position to compensate.
+ let offset = detailsSection.headerElement.totalOffsetBottom - treeElement.listItemElement.totalOffsetTop;
+ if (offset > 0)
+ this.scrollElement.scrollBy(0, -offset);
+ });
+
+ return treeOutline;
+ }
+
// Protected
saveStateToCookie(cookie)
@@ -862,6 +885,10 @@
let target = event.data.target;
let treeElement = this._findThreadTreeElementForTarget(target);
treeElement.refresh();
+
+ let activeCallFrameTreeElement = this._callStackTreeOutline.findTreeElement(WI.debuggerManager.activeCallFrame);
+ if (activeCallFrameTreeElement)
+ activeCallFrameTreeElement.reveal();
}
_debuggerActiveCallFrameDidChange()
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js (246025 => 246026)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js 2019-06-02 23:34:36 UTC (rev 246025)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js 2019-06-03 00:05:10 UTC (rev 246026)
@@ -65,16 +65,10 @@
// Public
- get element()
- {
- return this._element;
- }
+ get element() { return this._element; }
+ get headerElement() { return this._headerElement; }
+ get identifier() { return this._identifier; }
- get identifier()
- {
- return this._identifier;
- }
-
get title()
{
return this._titleElement.textContent;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js (246025 => 246026)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js 2019-06-02 23:34:36 UTC (rev 246025)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js 2019-06-03 00:05:10 UTC (rev 246026)
@@ -474,6 +474,29 @@
// Protected
+ createContentTreeOutline(options = {})
+ {
+ let treeOutline = super.createContentTreeOutline(options)
+
+ treeOutline.addEventListener(WI.TreeOutline.Event.ElementRevealed, (event) => {
+ let treeElement = event.data.element;
+ let detailsSections = [this._pauseReasonSection, this._callStackSection, this._breakpointsSection];
+ let detailsSection = detailsSections.find((detailsSection) => detailsSection.element.contains(treeElement.listItemElement));
+ if (!detailsSection)
+ return;
+
+ // Revealing a TreeElement at the scroll container's topmost edge with
+ // scrollIntoViewIfNeeded may result in the element being covered by the
+ // DetailsSection header, which uses sticky positioning. Detect this case,
+ // and adjust the sidebar content's scroll position to compensate.
+ let offset = detailsSection.headerElement.totalOffsetBottom - treeElement.listItemElement.totalOffsetTop;
+ if (offset > 0)
+ this.scrollElement.scrollBy(0, -offset);
+ });
+
+ return treeOutline;
+ }
+
resetFilter()
{
this._resourceTypeScopeBar.resetToDefault();
@@ -1728,6 +1751,10 @@
console.assert(treeElement);
if (treeElement)
treeElement.refresh();
+
+ let activeCallFrameTreeElement = this._callStackTreeOutline.findTreeElement(WI.debuggerManager.activeCallFrame);
+ if (activeCallFrameTreeElement)
+ activeCallFrameTreeElement.reveal();
}
_handleDebuggerActiveCallFrameDidChange(event)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js (246025 => 246026)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js 2019-06-02 23:34:36 UTC (rev 246025)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js 2019-06-03 00:05:10 UTC (rev 246026)
@@ -488,6 +488,9 @@
if (this.onreveal)
this.onreveal(this);
+
+ if (this.treeOutline)
+ this.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementRevealed, {element: this});
}
revealed(ignoreHidden)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js (246025 => 246026)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js 2019-06-02 23:34:36 UTC (rev 246025)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js 2019-06-03 00:05:10 UTC (rev 246026)
@@ -1159,6 +1159,7 @@
ElementAdded: Symbol("element-added"),
ElementDidChange: Symbol("element-did-change"),
ElementRemoved: Symbol("element-removed"),
+ ElementRevealed: Symbol("element-revealed"),
ElementClicked: Symbol("element-clicked"),
ElementDisclosureDidChanged: Symbol("element-disclosure-did-change"),
ElementVisibilityDidChange: Symbol("element-visbility-did-change"),
