Changeset 246026 in webkit


Ignore:
Timestamp:
Jun 2, 2019 5:05:10 PM (5 years ago)
Author:
Matt Baker
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:
Location:
trunk/Source/WebInspectorUI
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r246025 r246026  
     12019-06-02  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: Debugger: sidebar should always reveal active call frame when hitting a breakpoint
     4        https://bugs.webkit.org/show_bug.cgi?id=198228
     5        <rdar://problem/46719447>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Reveal the active call frame TreeElement when call frames change. Refreshing
     10        the current target's ThreadTreeElement children is insufficient, since
     11        the sidebar panel content may have been scrolled.
     12
     13        This patch also introduces a workaround to prevent the DetailsSection header
     14        element, which has sticky positioning, from covering a revealed TreeElement.
     15        This can be the case when the TreeElement being revealed is at the topmost edge
     16        of the scrolled content element.
     17
     18        * UserInterface/Base/Utilities.js:
     19
     20        * UserInterface/Views/DebuggerSidebarPanel.js:
     21        (WI.DebuggerSidebarPanel.prototype.createContentTreeOutline):
     22        (WI.DebuggerSidebarPanel.prototype._debuggerCallFramesDidChange):
     23
     24        * UserInterface/Views/DetailsSection.js:
     25        (WI.DetailsSection.prototype.get element):
     26        (WI.DetailsSection.prototype.get headerElement):
     27        (WI.DetailsSection.prototype.get identifier):
     28
     29        * UserInterface/Views/SourcesNavigationSidebarPanel.js:
     30        (WI.SourcesNavigationSidebarPanel.prototype.createContentTreeOutline):
     31        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerCallFramesDidChange):
     32
     33        * UserInterface/Views/TreeElement.js:
     34        (WI.TreeElement.prototype.reveal):
     35        * UserInterface/Views/TreeOutline.js:
     36
    1372019-06-02  Devin Rousso  <drousso@apple.com>
    238

  • trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js

    r245991 r246026  
    389389});
    390390
     391Object.defineProperty(Element.prototype, "totalOffsetBottom",
     392{
     393    get()
     394    {
     395        return this.getBoundingClientRect().bottom;
     396    }
     397});
     398
    391399Object.defineProperty(Element.prototype, "removeChildren",
    392400{

  • trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js

    r245827 r246026  
    162162
    163163        let breakpointsGroup = new WI.DetailsSectionGroup([breakpointsRow]);
    164         let breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
    165         this.contentView.element.appendChild(breakpointsSection.element);
     164        this._breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
     165        this.contentView.element.appendChild(this._breakpointsSection.element);
    166166
    167167        this._breakpointsContentTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._handleBreakpointElementAddedOrRemoved, this);
    … …  
    328328
    329329        return this._addScript(representedObject);
     330    }
     331
     332    createContentTreeOutline(options = {})
     333    {
     334        let treeOutline = super.createContentTreeOutline(options)
     335
     336        treeOutline.addEventListener(WI.TreeOutline.Event.ElementRevealed, (event) => {
     337            let treeElement = event.data.element;
     338            let detailsSections = [this._pauseReasonSection, this._callStackSection, this._breakpointsSection, this._scriptsSection];
     339            let detailsSection = detailsSections.find((detailsSection) => detailsSection.element.contains(treeElement.listItemElement));
     340            if (!detailsSection)
     341                return;
     342
     343            // Revealing a TreeElement at the scroll container's topmost edge with
     344            // scrollIntoViewIfNeeded may result in the element being covered by the
     345            // DetailsSection header, which uses sticky positioning. Detect this case,
     346            // and adjust the sidebar content's scroll position to compensate.
     347            let offset = detailsSection.headerElement.totalOffsetBottom - treeElement.listItemElement.totalOffsetTop;
     348            if (offset > 0)
     349                this.scrollElement.scrollBy(0, -offset);
     350        });
     351
     352        return treeOutline;
    330353    }
    331354
    … …  
    863886        let treeElement = this._findThreadTreeElementForTarget(target);
    864887        treeElement.refresh();
     888
     889        let activeCallFrameTreeElement = this._callStackTreeOutline.findTreeElement(WI.debuggerManager.activeCallFrame);
     890        if (activeCallFrameTreeElement)
     891            activeCallFrameTreeElement.reveal();
    865892    }
    866893

  • trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js

    r228216 r246026  
    6666    // Public
    6767
    68     get element()
    69     {
    70         return this._element;
    71     }
    72 
    73     get identifier()
    74     {
    75         return this._identifier;
    76     }
     68    get element() { return this._element; }
     69    get headerElement() { return this._headerElement; }
     70    get identifier() { return this._identifier; }
    7771
    7872    get title()

  • trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js

    r245827 r246026  
    475475    // Protected
    476476
     477    createContentTreeOutline(options = {})
     478    {
     479        let treeOutline = super.createContentTreeOutline(options)
     480
     481        treeOutline.addEventListener(WI.TreeOutline.Event.ElementRevealed, (event) => {
     482            let treeElement = event.data.element;
     483            let detailsSections = [this._pauseReasonSection, this._callStackSection, this._breakpointsSection];
     484            let detailsSection = detailsSections.find((detailsSection) => detailsSection.element.contains(treeElement.listItemElement));
     485            if (!detailsSection)
     486                return;
     487
     488            // Revealing a TreeElement at the scroll container's topmost edge with
     489            // scrollIntoViewIfNeeded may result in the element being covered by the
     490            // DetailsSection header, which uses sticky positioning. Detect this case,
     491            // and adjust the sidebar content's scroll position to compensate.
     492            let offset = detailsSection.headerElement.totalOffsetBottom - treeElement.listItemElement.totalOffsetTop;
     493            if (offset > 0)
     494                this.scrollElement.scrollBy(0, -offset);
     495        });
     496
     497        return treeOutline;
     498    }
     499
    477500    resetFilter()
    478501    {
    … …  
    17291752        if (treeElement)
    17301753            treeElement.refresh();
     1754
     1755        let activeCallFrameTreeElement = this._callStackTreeOutline.findTreeElement(WI.debuggerManager.activeCallFrame);
     1756        if (activeCallFrameTreeElement)
     1757            activeCallFrameTreeElement.reveal();
    17311758    }
    17321759

  • trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js

    r245166 r246026  
    489489        if (this.onreveal)
    490490            this.onreveal(this);
     491
     492        if (this.treeOutline)
     493            this.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementRevealed, {element: this});
    491494    }
    492495

  • trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js

    r244435 r246026  
    11601160    ElementDidChange: Symbol("element-did-change"),
    11611161    ElementRemoved: Symbol("element-removed"),
     1162    ElementRevealed: Symbol("element-revealed"),
    11621163    ElementClicked: Symbol("element-clicked"),
    11631164    ElementDisclosureDidChanged: Symbol("element-disclosure-did-change"),
Note: See TracChangeset for help on using the changeset viewer.