Changeset 248480 in webkit


Ignore:
Timestamp:
Aug 9, 2019 2:59:29 PM (5 years ago)
Author:
Devin Rousso
Message:

Web Inspector: Sources: increase the vertical space allocated to the call stack when paused
​https://bugs.webkit.org/show_bug.cgi?id=200236

Reviewed by Joseph Pecoraro.

Rather than uniformly constrict the height of the Call Stack and Breakpoints sections, they
should "flex" based on their importance, which can likely be derived from the current state.
This way, it's possible to see information from each section at the same time, but still
have enough space in each section to be able to do something useful.

When paused, the most useful data is the call stack, so give the Call Stack section the most
vertical space (the Pause Reason is also important, but it usually needs very little space).

When not paused, it's likely that the user cares more about the resources with breakpoints
than those without, so favor the Breakpoints section.

Each section will only expand to fit it's maximum content height.

If the inspector window becomes too short, remove the "flex" entirely and have all the
content be part of a single scroll area instead.

  • UserInterface/Views/SourcesNavigationSidebarPanel.js:

(WI.SourcesNavigationSidebarPanel):
(WI.SourcesNavigationSidebarPanel.prototype.createContentTreeOutline):
(WI.SourcesNavigationSidebarPanel.prototype._handleBreakpointElementAddedOrRemoved):
(WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerPaused):
(WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerResumed):
(WI.SourcesNavigationSidebarPanel.prototype._handleCallStackElementAddedOrRemoved): Deleted.

  • UserInterface/Views/SourcesNavigationSidebarPanel.css:

(.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container)): Added.
(.sidebar > .panel.navigation.sources > .content .details-section): Added.
(.sidebar > .panel.navigation.sources > .content .details-section.collapsed > .header > .options, .sidebar > .panel.navigation.sources > .content .details-section:not(.collapsed) > .content, .sidebar > .panel.navigation.sources > .content .details-section:not(.collapsed) > .content > .group): Added.
(.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint): Added.
(.sidebar > .panel.navigation.sources > .content > .navigation-bar): Added.
(@media (min-height: 650px)): Added.
(.sidebar > .panel.navigation.sources > .content > .pause-reason-container): Added.
(.sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources)): Added.
(.sidebar > .panel.navigation.sources > .content > .call-stack-container): Added.
(.sidebar > .panel.navigation.sources > .content > .breakpoints-container): Added.
(.sidebar > .panel.navigation.sources > .content > .resources): Added.
(.sidebar > .panel.navigation.sources > .content > .breakpoints-container .tree-outline .item.event-target-window .icon): Added.
(.sidebar > .panel.navigation.sources > .content > .details-section): Deleted.
(.sidebar > .panel.navigation.sources > .content > .details-section:matches(.paused-reason, .breakpoints).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 > .details-section:matches(.pause-reason, .call-stack, .breakpoints) > .content,): Deleted.
(.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints) > .content): Deleted.
(.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content): Deleted.
(.sidebar > .panel.navigation.sources > .content > .details-section.call-stack): Deleted.
(.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints): Deleted.
(.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .create-breakpoint): Deleted.
(@media (min-height: 600px)): Deleted.
(.sidebar > .panel.navigation.sources > .content > .pause-reason): Deleted.
(.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content,): Deleted.
(.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .tree-outline .item.event-target-window .icon): Deleted.
Wrap the Pause Reason, Call Stack, and Breakpoints WI.DetailsSections in a container
element so that the styling of the sticky header doesn't get affected by the clamping of the
container's height.

  • UserInterface/Views/DetailsSection.css:

(.details-section):
(.details-section > .header):
Create CSS variables for styles that will be overridden by the Sources navigation sidebar.

Location:
trunk/Source/WebInspectorUI
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r248454 r248480  
     12019-08-09  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Sources: increase the vertical space allocated to the call stack when paused
     4        https://bugs.webkit.org/show_bug.cgi?id=200236
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        Rather than uniformly constrict the height of the Call Stack and Breakpoints sections, they
     9        should "flex" based on their importance, which can likely be derived from the current state.
     10        This way, it's possible to see information from each section at the same time, but still
     11        have enough space in each section to be able to do something useful.
     12
     13        When paused, the most useful data is the call stack, so give the Call Stack section the most
     14        vertical space (the Pause Reason is also important, but it usually needs very little space).
     15
     16        When not paused, it's likely that the user cares more about the resources with breakpoints
     17        than those without, so favor the Breakpoints section.
     18
     19        Each section will only expand to fit it's maximum content height.
     20
     21        If the inspector window becomes too short, remove the "flex" entirely and have all the
     22        content be part of a single scroll area instead.
     23
     24        * UserInterface/Views/SourcesNavigationSidebarPanel.js:
     25        (WI.SourcesNavigationSidebarPanel):
     26        (WI.SourcesNavigationSidebarPanel.prototype.createContentTreeOutline):
     27        (WI.SourcesNavigationSidebarPanel.prototype._handleBreakpointElementAddedOrRemoved):
     28        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerPaused):
     29        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerResumed):
     30        (WI.SourcesNavigationSidebarPanel.prototype._handleCallStackElementAddedOrRemoved): Deleted.
     31        * UserInterface/Views/SourcesNavigationSidebarPanel.css:
     32        (.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container)): Added.
     33        (.sidebar > .panel.navigation.sources > .content .details-section): Added.
     34        (.sidebar > .panel.navigation.sources > .content .details-section.collapsed > .header > .options, .sidebar > .panel.navigation.sources > .content .details-section:not(.collapsed) > .content, .sidebar > .panel.navigation.sources > .content .details-section:not(.collapsed) > .content > .group): Added.
     35        (.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint): Added.
     36        (.sidebar > .panel.navigation.sources > .content > .navigation-bar): Added.
     37        (@media (min-height: 650px)): Added.
     38        (.sidebar > .panel.navigation.sources > .content > .pause-reason-container): Added.
     39        (.sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources)): Added.
     40        (.sidebar > .panel.navigation.sources > .content > .call-stack-container): Added.
     41        (.sidebar > .panel.navigation.sources > .content > .breakpoints-container): Added.
     42        (.sidebar > .panel.navigation.sources > .content > .resources): Added.
     43        (.sidebar > .panel.navigation.sources > .content > .breakpoints-container .tree-outline .item.event-target-window .icon): Added.
     44        (.sidebar > .panel.navigation.sources > .content > .details-section): Deleted.
     45        (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.paused-reason, .breakpoints).collapsed > .header > .options,): Deleted.
     46        (.sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content): Deleted.
     47        (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints > .header > .options .create-breakpoint): Deleted.
     48        (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.pause-reason, .call-stack, .breakpoints) > .content,): Deleted.
     49        (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints) > .content): Deleted.
     50        (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content): Deleted.
     51        (.sidebar > .panel.navigation.sources > .content > .details-section.call-stack): Deleted.
     52        (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints): Deleted.
     53        (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .create-breakpoint): Deleted.
     54        (@media (min-height: 600px)): Deleted.
     55        (.sidebar > .panel.navigation.sources > .content > .pause-reason): Deleted.
     56        (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content,): Deleted.
     57        (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .tree-outline .item.event-target-window .icon): Deleted.
     58        Wrap the Pause Reason, Call Stack, and Breakpoints `WI.DetailsSection`s in a container
     59        element so that the styling of the sticky header doesn't get affected by the clamping of the
     60        container's height.
     61
     62        * UserInterface/Views/DetailsSection.css:
     63        (.details-section):
     64        (.details-section > .header):
     65        Create CSS variables for styles that will be overridden by the Sources navigation sidebar.
     66
    1672019-08-08  Devin Rousso  <drousso@apple.com>
    268

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

    r244902 r248480  
    2727    font-size: 10px;
    2828    background-color: var(--panel-background-color);
    29     border-bottom: 1px solid var(--border-color);
     29    border-bottom: var(--details-section-border-bottom);
     30
     31    --details-section-border-bottom: 1px solid var(--border-color);
     32    --details-section-header-top: -1px;
    3033}
    3134
    … …  
    4548.details-section > .header {
    4649    position: sticky;
    47     top: -1px;
     50    top: var(--details-section-header-top);
    4851    height: 23px;
    4952    padding: 4px 0;

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

    r246518 r248480  
    6666}
    6767
    68 .sidebar > .panel.navigation.sources > .content > .details-section {
    69     padding-bottom: 1px;
    70     font-size: 11px;
    71     border-bottom-width: 1px !important;
     68.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container) {
     69    border-bottom: 1px solid var(--border-color);
    7270}
    7371
    74 .sidebar > .panel.navigation.sources > .content > .details-section:matches(.paused-reason, .breakpoints).collapsed > .header > .options,
    75 .sidebar > .panel.navigation.sources > .content > .details-section > .content,
    76 .sidebar > .panel.navigation.sources > .content > .details-section > .content > .group {
     72.sidebar > .panel.navigation.sources > .content .details-section {
     73    font-size: 11px;
     74    --details-section-border-bottom: none;
     75}
     76
     77.sidebar > .panel.navigation.sources > .content .details-section.collapsed > .header > .options,
     78.sidebar > .panel.navigation.sources > .content .details-section:not(.collapsed) > .content,
     79.sidebar > .panel.navigation.sources > .content .details-section:not(.collapsed) > .content > .group {
    7780    display: block;
    7881}
    7982
    80 .sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content {
    81     display: none;
    82 }
    83 
    84 .sidebar > .panel.navigation.sources > .content > .details-section.breakpoints > .header > .options .create-breakpoint {
    85     width: 15px;
    86 }
    87 
    88 .sidebar > .panel.navigation.sources > .content > .details-section:matches(.pause-reason, .call-stack, .breakpoints) > .content,
    89 .sidebar > .panel.navigation.sources > .content > .tree-outline.resources {
    90     overflow-y: auto;
    91 }
    92 
    93 .sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints) > .content {
    94     /* Same calculation as below, but without var(--item-count) */
    95     max-height: 110px;
    96 }
    97 
    98 .sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content {
    99     /* 1px from .sidebar > .panel.navigation.sources > .content > .details-section (border-bottom) */
    100     /* 5.5 to ensure that half of the next item is shown when overflowing */
    101     min-height: calc(min(var(--item-count), 5.5) * 20px);
    102 }
    103 
    104 .sidebar > .panel.navigation.sources > .content > .details-section.call-stack {
    105     --item-count: var(--call-stack-count);
    106 }
    107 
    108 .sidebar > .panel.navigation.sources > .content > .details-section.breakpoints {
    109     --item-count: var(--breakpoints-count);
    110 }
    111 
    112 .sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .create-breakpoint {
     83.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint {
    11384    width: 15px;
    11485}
    11586
    11687.sidebar > .panel.navigation.sources > .content > .navigation-bar {
     88    position: sticky;
     89    top: 0;
     90    z-index: var(--z-index-header);
    11791    margin-bottom: 1px;
     92    background-color: var(--panel-background-color);
    11893}
    11994
    … …  
    126101}
    127102
    128 @media (min-height: 600px) {
     103@media (min-height: 650px) {
    129104    .sidebar > .panel.navigation.sources > .content {
    130105        display: flex;
    … …  
    133108    }
    134109
    135     .sidebar > .panel.navigation.sources > .content > .pause-reason {
    136         flex-shrink: 0;
     110    .sidebar > .panel.navigation.sources > .content .details-section {
     111        --details-section-header-top: 0;
    137112    }
    138113
    139     .sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content,
    140     .sidebar > .panel.navigation.sources > .content > .tree-outline.resources {
     114    .sidebar > .panel.navigation.sources > .content > .pause-reason-container {
     115        flex-grow: 4;
     116        flex-shrink: 1;
     117    }
     118
     119    .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources) {
    141120        height: 100%;
     121        max-height: fit-content;
     122        overflow-y: auto;
     123    }
     124
     125    .sidebar > .panel.navigation.sources > .content > .call-stack-container {
     126        flex-grow: 3;
     127        flex-shrink: 2;
     128    }
     129
     130    .sidebar > .panel.navigation.sources > .content > .breakpoints-container {
     131        flex-grow: 2;
     132        flex-shrink: 3;
     133    }
     134
     135    .sidebar > .panel.navigation.sources > .content > .resources {
     136        flex-grow: 1;
     137        flex-shrink: 3;
    142138    }
    143139}
    144140
    145 .sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .tree-outline .item.event-target-window .icon {
     141.sidebar > .panel.navigation.sources > .content > .breakpoints-container .tree-outline .item.event-target-window .icon {
    146142    content: url(../Images/TypeObject.svg);
    147143}
    … …  
    153149    }
    154150}
     151

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

    r248274 r248480  
    114114        this._pauseReasonSection = new WI.DetailsSection("paused-reason", WI.UIString("Pause Reason"), [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);
    115115
     116        this._pauseReasonContainer = document.createElement("div");
     117        this._pauseReasonContainer.classList.add("pause-reason-container");
     118        this._pauseReasonContainer.appendChild(this._pauseReasonSection.element);
     119
    116120        this._callStackTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
    117         this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._handleCallStackElementAddedOrRemoved, this);
    118         this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.ElementRemoved, this._handleCallStackElementAddedOrRemoved, this);
    119121        this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
    120122
    … …  
    124126        let callStackGroup = new WI.DetailsSectionGroup([callStackRow]);
    125127        this._callStackSection = new WI.DetailsSection("call-stack", WI.UIString("Call Stack"), [callStackGroup]);
     128
     129        this._callStackContainer = document.createElement("div");
     130        this._callStackContainer.classList.add("call-stack-container");
     131        this._callStackContainer.appendChild(this._callStackSection.element);
    126132
    127133        this._mainTargetTreeElement = null;
    … …  
    194200        let breakpointsGroup = new WI.DetailsSectionGroup([breakpointsRow]);
    195201        this._breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
    196         this.contentView.element.insertBefore(this._breakpointsSection.element, this.contentView.element.firstChild);
     202
     203        this._breakpointsContainer = document.createElement("div");
     204        this._breakpointsContainer.classList.add("breakpoints-container");
     205        this._breakpointsContainer.appendChild(this._breakpointsSection.element);
     206
     207        this.contentView.element.insertBefore(this._breakpointsContainer, this.contentView.element.firstChild);
    197208
    198209        this._resourcesNavigationBar = new WI.NavigationBar;
    199210        this.contentView.addSubview(this._resourcesNavigationBar);
    200         this.contentView.element.insertBefore(this._resourcesNavigationBar.element, this._breakpointsSection.element.nextSibling);
     211        this.contentView.element.insertBefore(this._resourcesNavigationBar.element, this._breakpointsContainer.nextSibling);
    201212
    202213        this._resourcesNavigationBar.addNavigationItem(new WI.FlexibleSpaceNavigationItem);
    … …  
    489500    createContentTreeOutline(options = {})
    490501    {
    491         let treeOutline = super.createContentTreeOutline(options)
     502        let treeOutline = super.createContentTreeOutline(options);
    492503
    493504        treeOutline.addEventListener(WI.TreeOutline.Event.ElementRevealed, (event) => {
    … …  
    15331544    }
    15341545
    1535     _handleCallStackElementAddedOrRemoved(event)
    1536     {
    1537         let count = this._callStackTreeOutline.children.length;
    1538         for (let child of this._callStackTreeOutline.children)
    1539             count += child.children.length;
    1540 
    1541         // Don't count the main thread element when it is hidden.
    1542         if (WI.targets.length === 1)
    1543             --count;
    1544 
    1545         this.element.style.setProperty("--call-stack-count", count);
    1546     }
    1547 
    15481546    _handleBreakpointElementAddedOrRemoved(event)
    15491547    {
    … …  
    15791577        if (setting)
    15801578            setting.value = !!treeElement.parent;
    1581 
    1582         let count = this._breakpointsTreeOutline.children.length;
    1583         for (let child of this._breakpointsTreeOutline.children)
    1584             count += child.children.length;
    1585         this.element.style.setProperty("--breakpoints-count", count);
    15861579    }
    15871580
    … …  
    17951788    _handleDebuggerPaused(event)
    17961789    {
    1797         this.contentView.element.insertBefore(this._callStackSection.element, this.contentView.element.firstChild);
     1790        this.contentView.element.insertBefore(this._callStackContainer, this.contentView.element.firstChild);
    17981791
    17991792        if (this._updatePauseReason())
    1800             this.contentView.element.insertBefore(this._pauseReasonSection.element, this.contentView.element.firstChild);
     1793            this.contentView.element.insertBefore(this._pauseReasonContainer, this.contentView.element.firstChild);
    18011794
    18021795        this._debuggerPauseResumeButtonItem.enabled = true;
    … …  
    18111804    _handleDebuggerResumed(event)
    18121805    {
    1813         this._callStackSection.element.remove();
    1814 
    1815         this._pauseReasonSection.element.remove();
     1806        this._callStackContainer.remove();
     1807
     1808        this._pauseReasonContainer.remove();
    18161809
    18171810        this._debuggerPauseResumeButtonItem.enabled = true;
Note: See TracChangeset for help on using the changeset viewer.