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

Changeset 243225 in webkit


Ignore:
Timestamp:
Mar 20, 2019, 12:37:16 PM (7 years ago)
Author:
Devin Rousso
Message:

Web Inspector: Sources: disabled breakpoints banner should be sticky
​https://bugs.webkit.org/show_bug.cgi?id=195104
<rdar://problem/48442259>

Reviewed by Timothy Hatcher.

Allow each of the individual sections to be scrolled separately from the entire sidebar.

Leverage CSS variables set via JavaScript to be able to calculate the maximum height of each
WI.TreeOutline section based on the number of items.

  • UserInterface/Views/SourcesNavigationSidebarPanel.js:

(WI.SourcesNavigationSidebarPanel):
(WI.SourcesNavigationSidebarPanel.prototype._handleCallStackElementAddedOrRemoved): Added.
(WI.SourcesNavigationSidebarPanel.prototype._handleBreakpointElementAddedOrRemoved):
(WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerPaused):
(WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerResumed):

  • UserInterface/Views/SourcesNavigationSidebarPanel.css:

(.sidebar > .panel.navigation.sources > .content):
(.sidebar > .panel.navigation.sources > .content .details-section): Added.
(.sidebar > .panel.navigation.sources > .content .details-section.paused-reason.collapsed > .header > .options,): Added.
(.sidebar > .panel.navigation.sources > .content .details-section.collapsed > .content): Added.
(.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container)): Added.
(.sidebar > .panel.navigation.sources > .content > .call-stack-container): Added.
(.sidebar > .panel.navigation.sources > .content > .breakpoints-container): Added.
(.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint): Added.
(.sidebar > .panel.navigation.sources > .content > .resources-container): Added.
(.sidebar > .panel.navigation.sources > .content .tree-outline.single-thread): Added.
(.sidebar > .panel.navigation.sources > .content .tree-outline.single-thread > .item.thread): Added.
(@media (min-height: 600px) .sidebar > .panel.navigation.sources > .content): Added.
(@media (min-height: 600px) .sidebar > .panel.navigation.sources > .content > .pause-reason-container): Added.
(@media (min-height: 600px) .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container)): Added.
(.sidebar > .panel.navigation.sources > .content > .details-section): Deleted.
(.sidebar > .panel.navigation.sources > .content > .details-section.paused-reason.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 > .tree-outline.single-thread): Deleted.
(.sidebar > .panel.navigation.sources > .content > .tree-outline.single-thread > .item.thread): Deleted.
(.sidebar > .panel.navigation.sources > .content > .resources): Deleted.

Location:
trunk/Source/WebInspectorUI
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r243224 r243225  
     12019-03-20  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Sources: disabled breakpoints banner should be sticky
     4        https://bugs.webkit.org/show_bug.cgi?id=195104
     5        <rdar://problem/48442259>
     6
     7        Reviewed by Timothy Hatcher.
     8
     9        Allow each of the individual sections to be scrolled separately from the entire sidebar.
     10
     11        Leverage CSS variables set via JavaScript to be able to calculate the maximum height of each
     12        `WI.TreeOutline` section based on the number of items.
     13
     14        * UserInterface/Views/SourcesNavigationSidebarPanel.js:
     15        (WI.SourcesNavigationSidebarPanel):
     16        (WI.SourcesNavigationSidebarPanel.prototype._handleCallStackElementAddedOrRemoved): Added.
     17        (WI.SourcesNavigationSidebarPanel.prototype._handleBreakpointElementAddedOrRemoved):
     18        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerPaused):
     19        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerResumed):
     20        * UserInterface/Views/SourcesNavigationSidebarPanel.css:
     21        (.sidebar > .panel.navigation.sources > .content):
     22        (.sidebar > .panel.navigation.sources > .content .details-section): Added.
     23        (.sidebar > .panel.navigation.sources > .content .details-section.paused-reason.collapsed > .header > .options,): Added.
     24        (.sidebar > .panel.navigation.sources > .content .details-section.collapsed > .content): Added.
     25        (.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container)): Added.
     26        (.sidebar > .panel.navigation.sources > .content > .call-stack-container): Added.
     27        (.sidebar > .panel.navigation.sources > .content > .breakpoints-container): Added.
     28        (.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint): Added.
     29        (.sidebar > .panel.navigation.sources > .content > .resources-container): Added.
     30        (.sidebar > .panel.navigation.sources > .content .tree-outline.single-thread): Added.
     31        (.sidebar > .panel.navigation.sources > .content .tree-outline.single-thread > .item.thread): Added.
     32        (@media (min-height: 600px) .sidebar > .panel.navigation.sources > .content): Added.
     33        (@media (min-height: 600px) .sidebar > .panel.navigation.sources > .content > .pause-reason-container): Added.
     34        (@media (min-height: 600px) .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container)): Added.
     35        (.sidebar > .panel.navigation.sources > .content > .details-section): Deleted.
     36        (.sidebar > .panel.navigation.sources > .content > .details-section.paused-reason.collapsed > .header > .options,): Deleted.
     37        (.sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content): Deleted.
     38        (.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints > .header > .options .create-breakpoint): Deleted.
     39        (.sidebar > .panel.navigation.sources > .content > .tree-outline.single-thread): Deleted.
     40        (.sidebar > .panel.navigation.sources > .content > .tree-outline.single-thread > .item.thread): Deleted.
     41        (.sidebar > .panel.navigation.sources > .content > .resources): Deleted.
     42
    1432019-03-20  Devin Rousso  <drousso@apple.com>
    244

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

    r243180 r243225  
    2525
    2626.sidebar > .panel.navigation.sources > .content {
    27     display: flex;
    28     flex-direction: column;
    2927    top: var(--navigation-bar-height);
    3028}
    … …  
    6967}
    7068
    71 .sidebar > .panel.navigation.sources > .content > .details-section {
     69.sidebar > .panel.navigation.sources > .content .details-section {
    7270    padding-bottom: 1px;
    7371    font-size: 11px;
    74     border-width: 1px !important;
     72    border-bottom: none;
    7573}
    7674
    77 .sidebar > .panel.navigation.sources > .content > .details-section.paused-reason.collapsed > .header > .options,
    78 .sidebar > .panel.navigation.sources > .content > .details-section.breakpoints.collapsed > .header > .options,
    79 .sidebar > .panel.navigation.sources > .content > .details-section > .content,
    80 .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 {
    8178    display: block;
    8279}
    8380
    84 .sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content {
     81.sidebar > .panel.navigation.sources > .content .details-section.collapsed > .content {
    8582    display: none;
    8683}
    8784
    88 .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 {
     86    width: 15px;
     87}
     88
     89.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container) {
     90    border-bottom: 1px solid var(--border-color);
     91    overflow-y: auto;
     92}
     93
     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));
     99}
     100
     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) */
     104    /* 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));
     106}
     107
     108.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint {
    89109    width: 15px;
    90110}
    … …  
    94114}
    95115
    96 .sidebar > .panel.navigation.sources > .content > .resources {
    97     position: relative;
    98     height: 100%;
     116.sidebar > .panel.navigation.sources > .content > .resources-container {
     117    overflow-y: auto;
    99118}
    100119
    … …  
    107126}
    108127
     128@media (min-height: 600px) {
     129    .sidebar > .panel.navigation.sources > .content {
     130        display: flex;
     131        flex-direction: column;
     132        overflow-y: hidden;
     133    }
     134
     135    .sidebar > .panel.navigation.sources > .content > .pause-reason-container {
     136        flex-shrink: 0;
     137    }
     138
     139    .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container) {
     140        height: 100%;
     141    }
     142}
     143
    109144@media (prefers-dark-interface) {
    110145    .sidebar > .panel.navigation.sources > .content > .warning-banner {

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

    r243180 r243225  
    112112        this._pauseReasonTextRow = new WI.DetailsSectionTextRow;
    113113        this._pauseReasonGroup = new WI.DetailsSectionGroup([this._pauseReasonTextRow]);
    114         this._pauseReasonSection = new WI.DetailsSection("paused-reason", WI.UIString("Pause Reason"), [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);
     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);
    115119
    116120        this._callStackTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
     121        this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._handleCallStackElementAddedOrRemoved, this);
     122        this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.ElementRemoved, this._handleCallStackElementAddedOrRemoved, this);
    117123        this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
    118124
    … …  
    121127
    122128        let callStackGroup = new WI.DetailsSectionGroup([callStackRow]);
    123         this._callStackSection = new WI.DetailsSection("call-stack", WI.UIString("Call Stack"), [callStackGroup]);
     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);
    124134
    125135        this._mainTargetTreeElement = null;
    … …  
    184194        let breakpointsGroup = new WI.DetailsSectionGroup([breakpointsRow]);
    185195        let breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
    186         this.contentView.element.insertBefore(breakpointsSection.element, this.contentView.element.firstChild);
     196
     197        let breakpointsContainer = this.contentView.element.insertBefore(document.createElement("div"), this.contentView.element.firstChild);
     198        breakpointsContainer.classList.add("breakpoints-container");
     199        breakpointsContainer.appendChild(breakpointsSection.element);
    187200
    188201        this._resourcesNavigationBar = new WI.NavigationBar;
    … …  
    214227
    215228        let resourcesContainer = this.contentView.element.insertBefore(document.createElement("div"), this._resourcesNavigationBar.element.nextSibling);
    216         resourcesContainer.classList.add("resources");
     229        resourcesContainer.classList.add("resources-container");
    217230
    218231        this._resourcesTreeOutline = this.contentTreeOutline;
    … …  
    14221435    }
    14231436
     1437    _handleCallStackElementAddedOrRemoved(event)
     1438    {
     1439        let count = this._callStackTreeOutline.children.length;
     1440        for (let child of this._callStackTreeOutline.children)
     1441            count += child.children.length;
     1442
     1443        // Don't count the main thread element when it is hidden.
     1444        if (WI.targets.length === 1)
     1445            --count;
     1446
     1447        this.element.style.setProperty("--call-stack-count", count);
     1448    }
     1449
    14241450    _handleBreakpointElementAddedOrRemoved(event)
    14251451    {
    … …  
    14341460        if (setting)
    14351461            setting.value = !!treeElement.parent;
     1462
     1463        let count = this._breakpointsTreeOutline.children.length;
     1464        for (let child of this._breakpointsTreeOutline.children)
     1465            count += child.children.length;
     1466        this.element.style.setProperty("--breakpoints-count", count);
    14361467    }
    14371468
    … …  
    16361667    _handleDebuggerPaused(event)
    16371668    {
    1638         this.contentView.element.insertBefore(this._callStackSection.element, this.contentView.element.firstChild);
     1669        this.contentView.element.insertBefore(this._callStackContainer, this.contentView.element.firstChild);
    16391670
    16401671        if (this._updatePauseReason())
    1641             this.contentView.element.insertBefore(this._pauseReasonSection.element, this.contentView.element.firstChild);
     1672            this.contentView.element.insertBefore(this._pauseReasonContainer, this.contentView.element.firstChild);
    16421673
    16431674        this._debuggerPauseResumeButtonItem.enabled = true;
    … …  
    16521683    _handleDebuggerResumed(event)
    16531684    {
    1654         this._callStackSection.element.remove();
    1655 
    1656         this._pauseReasonSection.element.remove();
     1685        this._callStackContainer.remove();
     1686
     1687        this._pauseReasonContainer.remove();
    16571688
    16581689        this._debuggerPauseResumeButtonItem.enabled = true;
Note: See TracChangeset for help on using the changeset viewer.