⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 243271 in webkit


Ignore:
Timestamp:
Mar 20, 2019, 7:23:21 PM (7 years ago)
Author:
Devin Rousso
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.

Location:
trunk/Source/WebInspectorUI
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r243269 r243271  
     12019-03-20  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Sources: collapsing a section doesn't shrink the space used by that section
     4        https://bugs.webkit.org/show_bug.cgi?id=196045
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        * UserInterface/Views/SourcesNavigationSidebarPanel.js:
     9        (WI.SourcesNavigationSidebarPanel):
     10        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerPaused):
     11        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerResumed):
     12        * UserInterface/Views/SourcesNavigationSidebarPanel.css:
     13        (.sidebar > .panel.navigation.sources > .content > .details-section):
     14        (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.paused-reason, .breakpoins).collapsed > .header > .options,):
     15        (.sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content):
     16        (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints > .header > .options .create-breakpoint):
     17        (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.pause-reason, .call-stack, .breakpoints) > .content,):
     18        (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints) > .content):
     19        (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content):
     20        (.sidebar > .panel.navigation.sources > .content > .details-section.call-stack):
     21        (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints):
     22        (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .create-breakpoint):
     23        (.sidebar > .panel.navigation.sources > .content > .pause-reason):
     24        (.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content,):
     25        (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .tree-outline .item.event-target-window .icon):
     26        (.sidebar > .panel.navigation.sources > .content .details-section): Deleted.
     27        (.sidebar > .panel.navigation.sources > .content .details-section:matches(.paused-reason, .breakpoins).collapsed > .header > .options,): Deleted.
     28        (.sidebar > .panel.navigation.sources > .content .details-section.collapsed > .content): Deleted.
     29        (.sidebar > .panel.navigation.sources > .content .details-section.breakpoints > .header > .options .create-breakpoint): Deleted.
     30        (.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container)): Deleted.
     31        (.sidebar > .panel.navigation.sources > .content > .call-stack-container): Deleted.
     32        (.sidebar > .panel.navigation.sources > .content > .breakpoints-container): Deleted.
     33        (.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint): Deleted.
     34        (.sidebar > .panel.navigation.sources > .content > .resources-container): Deleted.
     35        (.sidebar > .panel.navigation.sources > .content > .pause-reason-container): Deleted.
     36        (.sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container)): Deleted.
     37        (.sidebar > .panel.navigation.sources > .content > .breakpoints .tree-outline .item.event-target-window .icon): Deleted.
     38         - Apply the overflow scrolling to the content element of each `WI.DetailsSection`.
     39         - Ensure that there is a maximum height for each section.
     40         - When `.collapsed`, don't try to grow/shrink the section based on its contents.
     41
     42        * UserInterface/Views/CallFrameTreeElement.css:
     43        (.tree-outline .item.call-frame):
     44        (.tree-outline .item.call-frame .status):
     45        Make the container of the active call frame status indicator relatively positioned so that
     46        the active call frame status indicator will follow the container when scrolling.
     47
    1482019-03-20  Devin Rousso  <drousso@apple.com>
    249

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

    r242768 r243271  
    2424 */
    2525
     26.tree-outline .item.call-frame {
     27    position: relative;
     28}
     29
    2630.tree-outline .item.call-frame .status {
    2731    position: absolute;
    … …  
    2933    -webkit-margin-start: 1px;
    3034
    31     --call-frame-status-start: 1px;
     35    --call-frame-status-start: 11px;
    3236}
    3337

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

    r243244 r243271  
    6767}
    6868
    69 .sidebar > .panel.navigation.sources > .content .details-section {
     69.sidebar > .panel.navigation.sources > .content > .details-section {
    7070    padding-bottom: 1px;
    7171    font-size: 11px;
    72     border-bottom: none;
     72    border-bottom-width: 1px !important;
    7373}
    7474
    75 .sidebar > .panel.navigation.sources > .content .details-section:matches(.paused-reason, .breakpoins).collapsed > .header > .options,
    76 .sidebar > .panel.navigation.sources > .content .details-section > .content,
    77 .sidebar > .panel.navigation.sources > .content .details-section > .content > .group {
     75.sidebar > .panel.navigation.sources > .content > .details-section:matches(.paused-reason, .breakpoins).collapsed > .header > .options,
     76.sidebar > .panel.navigation.sources > .content > .details-section > .content,
     77.sidebar > .panel.navigation.sources > .content > .details-section > .content > .group {
    7878    display: block;
    7979}
    8080
    81 .sidebar > .panel.navigation.sources > .content .details-section.collapsed > .content {
     81.sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content {
    8282    display: none;
    8383}
    8484
    85 .sidebar > .panel.navigation.sources > .content .details-section.breakpoints > .header > .options .create-breakpoint {
     85.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints > .header > .options .create-breakpoint {
    8686    width: 15px;
    8787}
    8888
    89 .sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container) {
    90     border-bottom: 1px solid var(--border-color);
     89.sidebar > .panel.navigation.sources > .content > .details-section:matches(.pause-reason, .call-stack, .breakpoints) > .content,
     90.sidebar > .panel.navigation.sources > .content > .tree-outline.resources {
    9191    overflow-y: auto;
    9292}
    9393
    94 .sidebar > .panel.navigation.sources > .content > .call-stack-container {
    95     /* 24px from .details-section > .header (23px height and -1px top) */
    96     /* 1px from .sidebar > .panel.navigation.sources > .content > .call-stack-container (border-bottom) */
    97     /* 5.5 to ensure that half of the next item is shown when overflowing */
    98     min-height: calc(25px + calc(min(var(--call-stack-count), 5.5) * 20px));
     94.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints) > .content {
     95    /* Same calculation as below, but without var(--item-count) */
     96    max-height: 110px;
    9997}
    10098
    101 .sidebar > .panel.navigation.sources > .content > .breakpoints-container {
    102     /* 24px from `.details-section > .header` (23px height and -1px top) */
    103     /* 1px from .sidebar > .panel.navigation.sources > .content > .breakpoints-container (border-bottom) */
     99.sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content {
     100    /* 1px from .sidebar > .panel.navigation.sources > .content > .details-section (border-bottom) */
    104101    /* 5.5 to ensure that half of the next item is shown when overflowing */
    105     min-height: calc(25px + calc(min(var(--breakpoints-count), 5.5) * 20px));
     102    min-height: calc(min(var(--item-count), 5.5) * 20px);
    106103}
    107104
    108 .sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint {
     105.sidebar > .panel.navigation.sources > .content > .details-section.call-stack {
     106    --item-count: var(--call-stack-count);
     107}
     108
     109.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints {
     110    --item-count: var(--breakpoints-count);
     111}
     112
     113.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .create-breakpoint {
    109114    width: 15px;
    110115}
    … …  
    112117.sidebar > .panel.navigation.sources > .content > .navigation-bar {
    113118    margin-bottom: 1px;
    114 }
    115 
    116 .sidebar > .panel.navigation.sources > .content > .resources-container {
    117     overflow-y: auto;
    118119}
    119120
    … …  
    133134    }
    134135
    135     .sidebar > .panel.navigation.sources > .content > .pause-reason-container {
     136    .sidebar > .panel.navigation.sources > .content > .pause-reason {
    136137        flex-shrink: 0;
    137138    }
    138139
    139     .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container) {
     140    .sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content,
     141    .sidebar > .panel.navigation.sources > .content > .tree-outline.resources {
    140142        height: 100%;
    141143    }
    142144}
    143145
    144 .sidebar > .panel.navigation.sources > .content > .breakpoints .tree-outline .item.event-target-window .icon {
     146.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .tree-outline .item.event-target-window .icon {
    145147    content: url(../Images/TypeObject.svg);
    146148}

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

    r243244 r243271  
    112112        this._pauseReasonTextRow = new WI.DetailsSectionTextRow;
    113113        this._pauseReasonGroup = new WI.DetailsSectionGroup([this._pauseReasonTextRow]);
    114         let pauseReasonSection = new WI.DetailsSection("paused-reason", WI.UIString("Pause Reason"), [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);
    115 
    116         this._pauseReasonContainer = document.createElement("div");
    117         this._pauseReasonContainer.className = "pause-reason-container";
    118         this._pauseReasonContainer.appendChild(pauseReasonSection.element);
     114        this._pauseReasonSection = new WI.DetailsSection("paused-reason", WI.UIString("Pause Reason"), [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);
    119115
    120116        this._callStackTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
    … …  
    127123
    128124        let callStackGroup = new WI.DetailsSectionGroup([callStackRow]);
    129         let callStackSection = new WI.DetailsSection("call-stack", WI.UIString("Call Stack"), [callStackGroup]);
    130 
    131         this._callStackContainer = document.createElement("div");
    132         this._callStackContainer.className = "call-stack-container";
    133         this._callStackContainer.appendChild(callStackSection.element);
     125        this._callStackSection = new WI.DetailsSection("call-stack", WI.UIString("Call Stack"), [callStackGroup]);
    134126
    135127        this._mainTargetTreeElement = null;
    … …  
    201193
    202194        let breakpointsGroup = new WI.DetailsSectionGroup([breakpointsRow]);
    203         let breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
    204 
    205         let breakpointsContainer = this.contentView.element.insertBefore(document.createElement("div"), this.contentView.element.firstChild);
    206         breakpointsContainer.classList.add("breakpoints-container");
    207         breakpointsContainer.appendChild(breakpointsSection.element);
     195        this._breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
     196        this.contentView.element.insertBefore(this._breakpointsSection.element, this.contentView.element.firstChild);
    208197
    209198        this._resourcesNavigationBar = new WI.NavigationBar;
    210199        this.contentView.addSubview(this._resourcesNavigationBar);
    211         this.contentView.element.insertBefore(this._resourcesNavigationBar.element, breakpointsSection.nextSibling);
     200        this.contentView.element.insertBefore(this._resourcesNavigationBar.element, this._breakpointsSection.element.nextSibling);
    212201
    213202        this._resourcesNavigationBar.addNavigationItem(new WI.FlexibleSpaceNavigationItem);
    … …  
    234223        this._resourcesNavigationBar.addNavigationItem(resourceGroupingModeNavigationItem);
    235224
    236         let resourcesContainer = this.contentView.element.insertBefore(document.createElement("div"), this._resourcesNavigationBar.element.nextSibling);
    237         resourcesContainer.classList.add("resources-container");
    238 
    239225        this._resourcesTreeOutline = this.contentTreeOutline;
     226        this._resourcesTreeOutline.element.classList.add("resources");
    240227        this._resourcesTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
    241228        this._resourcesTreeOutline.includeSourceMapResourceChildren = true;
    242         resourcesContainer.appendChild(this._resourcesTreeOutline.element);
     229        this.contentView.element.insertBefore(this._resourcesTreeOutline.element, this._resourcesNavigationBar.element.nextSibling);
    243230
    244231        let onlyShowResourcesWithIssuesFilterFunction = (treeElement) => {
    … …  
    16981685    _handleDebuggerPaused(event)
    16991686    {
    1700         this.contentView.element.insertBefore(this._callStackContainer, this.contentView.element.firstChild);
     1687        this.contentView.element.insertBefore(this._callStackSection.element, this.contentView.element.firstChild);
    17011688
    17021689        if (this._updatePauseReason())
    1703             this.contentView.element.insertBefore(this._pauseReasonContainer, this.contentView.element.firstChild);
     1690            this.contentView.element.insertBefore(this._pauseReasonSection.element, this.contentView.element.firstChild);
    17041691
    17051692        this._debuggerPauseResumeButtonItem.enabled = true;
    … …  
    17141701    _handleDebuggerResumed(event)
    17151702    {
    1716         this._callStackContainer.remove();
    1717 
    1718         this._pauseReasonContainer.remove();
     1703        this._callStackSection.element.remove();
     1704
     1705        this._pauseReasonSection.element.remove();
    17191706
    17201707        this._debuggerPauseResumeButtonItem.enabled = true;
Note: See TracChangeset for help on using the changeset viewer.