<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[243225] trunk/Source/WebInspectorUI</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/243225">243225</a></dd>
<dt>Author</dt> <dd>drousso@apple.com</dd>
<dt>Date</dt> <dd>2019-03-20 12:37:16 -0700 (Wed, 20 Mar 2019)</dd>
</dl>

<h3>Log Message</h3>
<pre>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.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSourcesNavigationSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSourcesNavigationSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (243224 => 243225)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog    2019-03-20 19:11:01 UTC (rev 243224)
+++ trunk/Source/WebInspectorUI/ChangeLog       2019-03-20 19:37:16 UTC (rev 243225)
</span><span class="lines">@@ -1,5 +1,47 @@
</span><span class="cx"> 2019-03-20  Devin Rousso  <drousso@apple.com>
</span><span class="cx"> 
</span><ins>+        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.
+
+2019-03-20  Devin Rousso  <drousso@apple.com>
+
</ins><span class="cx">         "Reveal in Layers Tab" context menu option should not be available if the Layers Tab has not been enabled
</span><span class="cx">         https://bugs.webkit.org/show_bug.cgi?id=196009
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSourcesNavigationSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css (243224 => 243225)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css        2019-03-20 19:11:01 UTC (rev 243224)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css   2019-03-20 19:37:16 UTC (rev 243225)
</span><span class="lines">@@ -24,8 +24,6 @@
</span><span class="cx">  */
</span><span class="cx"> 
</span><span class="cx"> .sidebar > .panel.navigation.sources > .content {
</span><del>-    display: flex;
-    flex-direction: column;
</del><span class="cx">     top: var(--navigation-bar-height);
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="lines">@@ -68,34 +66,55 @@
</span><span class="cx">     display: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.sidebar > .panel.navigation.sources > .content > .details-section {
</del><ins>+.sidebar > .panel.navigation.sources > .content .details-section {
</ins><span class="cx">     padding-bottom: 1px;
</span><span class="cx">     font-size: 11px;
</span><del>-    border-width: 1px !important;
</del><ins>+    border-bottom: none;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-.sidebar > .panel.navigation.sources > .content > .details-section.paused-reason.collapsed > .header > .options,
-.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints.collapsed > .header > .options,
-.sidebar > .panel.navigation.sources > .content > .details-section > .content,
-.sidebar > .panel.navigation.sources > .content > .details-section > .content > .group {
</del><ins>+.sidebar > .panel.navigation.sources > .content .details-section:matches(.paused-reason, .breakpoins).collapsed > .header > .options,
+.sidebar > .panel.navigation.sources > .content .details-section > .content,
+.sidebar > .panel.navigation.sources > .content .details-section > .content > .group {
</ins><span class="cx">     display: block;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content {
</del><ins>+.sidebar > .panel.navigation.sources > .content .details-section.collapsed > .content {
</ins><span class="cx">     display: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.sidebar > .panel.navigation.sources > .content > .details-section.breakpoints > .header > .options .create-breakpoint {
</del><ins>+.sidebar > .panel.navigation.sources > .content .details-section.breakpoints > .header > .options .create-breakpoint {
</ins><span class="cx">     width: 15px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container) {
+    border-bottom: 1px solid var(--border-color);
+    overflow-y: auto;
+}
+
+.sidebar > .panel.navigation.sources > .content > .call-stack-container {
+    /* 24px from .details-section > .header (23px height and -1px top) */
+    /* 1px from .sidebar > .panel.navigation.sources > .content > .call-stack-container (border-bottom) */
+    /* 5.5 to ensure that half of the next item is shown when overflowing */
+    min-height: calc(25px + calc(min(var(--call-stack-count), 5.5) * 20px));
+}
+
+.sidebar > .panel.navigation.sources > .content > .breakpoints-container {
+    /* 24px from `.details-section > .header` (23px height and -1px top) */
+    /* 1px from .sidebar > .panel.navigation.sources > .content > .breakpoints-container (border-bottom) */
+    /* 5.5 to ensure that half of the next item is shown when overflowing */
+    min-height: calc(25px + calc(min(var(--breakpoints-count), 5.5) * 20px));
+}
+
+.sidebar > .panel.navigation.sources > .content > .breakpoints-container .create-breakpoint {
+    width: 15px;
+}
+
</ins><span class="cx"> .sidebar > .panel.navigation.sources > .content > .navigation-bar {
</span><span class="cx">     margin-bottom: 1px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.sidebar > .panel.navigation.sources > .content > .resources {
-    position: relative;
-    height: 100%;
</del><ins>+.sidebar > .panel.navigation.sources > .content > .resources-container {
+    overflow-y: auto;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> .sidebar > .panel.navigation.sources > .content .tree-outline.single-thread {
</span><span class="lines">@@ -106,6 +125,22 @@
</span><span class="cx">     display: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+@media (min-height: 600px) {
+    .sidebar > .panel.navigation.sources > .content {
+        display: flex;
+        flex-direction: column;
+        overflow-y: hidden;
+    }
+
+    .sidebar > .panel.navigation.sources > .content > .pause-reason-container {
+        flex-shrink: 0;
+    }
+
+    .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container) {
+        height: 100%;
+    }
+}
+
</ins><span class="cx"> @media (prefers-dark-interface) {
</span><span class="cx">     .sidebar > .panel.navigation.sources > .content > .warning-banner {
</span><span class="cx">         color: var(--yellow-highlight-text-color);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSourcesNavigationSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js (243224 => 243225)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js 2019-03-20 19:11:01 UTC (rev 243224)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js    2019-03-20 19:37:16 UTC (rev 243225)
</span><span class="lines">@@ -111,9 +111,15 @@
</span><span class="cx">         this._pauseReasonLinkContainerElement = document.createElement("span");
</span><span class="cx">         this._pauseReasonTextRow = new WI.DetailsSectionTextRow;
</span><span class="cx">         this._pauseReasonGroup = new WI.DetailsSectionGroup([this._pauseReasonTextRow]);
</span><del>-        this._pauseReasonSection = new WI.DetailsSection("paused-reason", WI.UIString("Pause Reason"), [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);
</del><ins>+        let pauseReasonSection = new WI.DetailsSection("paused-reason", WI.UIString("Pause Reason"), [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);
</ins><span class="cx"> 
</span><ins>+        this._pauseReasonContainer = document.createElement("div");
+        this._pauseReasonContainer.className = "pause-reason-container";
+        this._pauseReasonContainer.appendChild(pauseReasonSection.element);
+
</ins><span class="cx">         this._callStackTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
</span><ins>+        this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._handleCallStackElementAddedOrRemoved, this);
+        this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.ElementRemoved, this._handleCallStackElementAddedOrRemoved, this);
</ins><span class="cx">         this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
</span><span class="cx"> 
</span><span class="cx">         let callStackRow = new WI.DetailsSectionRow;
</span><span class="lines">@@ -120,8 +126,12 @@
</span><span class="cx">         callStackRow.element.appendChild(this._callStackTreeOutline.element);
</span><span class="cx"> 
</span><span class="cx">         let callStackGroup = new WI.DetailsSectionGroup([callStackRow]);
</span><del>-        this._callStackSection = new WI.DetailsSection("call-stack", WI.UIString("Call Stack"), [callStackGroup]);
</del><ins>+        let callStackSection = new WI.DetailsSection("call-stack", WI.UIString("Call Stack"), [callStackGroup]);
</ins><span class="cx"> 
</span><ins>+        this._callStackContainer = document.createElement("div");
+        this._callStackContainer.className = "call-stack-container";
+        this._callStackContainer.appendChild(callStackSection.element);
+
</ins><span class="cx">         this._mainTargetTreeElement = null;
</span><span class="cx">         this._activeCallFrameTreeElement = null;
</span><span class="cx"> 
</span><span class="lines">@@ -183,8 +193,11 @@
</span><span class="cx"> 
</span><span class="cx">         let breakpointsGroup = new WI.DetailsSectionGroup([breakpointsRow]);
</span><span class="cx">         let breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
</span><del>-        this.contentView.element.insertBefore(breakpointsSection.element, this.contentView.element.firstChild);
</del><span class="cx"> 
</span><ins>+        let breakpointsContainer = this.contentView.element.insertBefore(document.createElement("div"), this.contentView.element.firstChild);
+        breakpointsContainer.classList.add("breakpoints-container");
+        breakpointsContainer.appendChild(breakpointsSection.element);
+
</ins><span class="cx">         this._resourcesNavigationBar = new WI.NavigationBar;
</span><span class="cx">         this.contentView.addSubview(this._resourcesNavigationBar);
</span><span class="cx">         this.contentView.element.insertBefore(this._resourcesNavigationBar.element, breakpointsSection.nextSibling);
</span><span class="lines">@@ -213,7 +226,7 @@
</span><span class="cx">         this._resourcesNavigationBar.addNavigationItem(resourceGroupingModeNavigationItem);
</span><span class="cx"> 
</span><span class="cx">         let resourcesContainer = this.contentView.element.insertBefore(document.createElement("div"), this._resourcesNavigationBar.element.nextSibling);
</span><del>-        resourcesContainer.classList.add("resources");
</del><ins>+        resourcesContainer.classList.add("resources-container");
</ins><span class="cx"> 
</span><span class="cx">         this._resourcesTreeOutline = this.contentTreeOutline;
</span><span class="cx">         this._resourcesTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
</span><span class="lines">@@ -1421,6 +1434,19 @@
</span><span class="cx">         console.error("Unknown tree element", treeElement);
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    _handleCallStackElementAddedOrRemoved(event)
+    {
+        let count = this._callStackTreeOutline.children.length;
+        for (let child of this._callStackTreeOutline.children)
+            count += child.children.length;
+
+        // Don't count the main thread element when it is hidden.
+        if (WI.targets.length === 1)
+            --count;
+
+        this.element.style.setProperty("--call-stack-count", count);
+    }
+
</ins><span class="cx">     _handleBreakpointElementAddedOrRemoved(event)
</span><span class="cx">     {
</span><span class="cx">         let treeElement = event.data.element;
</span><span class="lines">@@ -1433,6 +1459,11 @@
</span><span class="cx"> 
</span><span class="cx">         if (setting)
</span><span class="cx">             setting.value = !!treeElement.parent;
</span><ins>+
+        let count = this._breakpointsTreeOutline.children.length;
+        for (let child of this._breakpointsTreeOutline.children)
+            count += child.children.length;
+        this.element.style.setProperty("--breakpoints-count", count);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _handleCreateBreakpointMouseDown(event)
</span><span class="lines">@@ -1635,10 +1666,10 @@
</span><span class="cx"> 
</span><span class="cx">     _handleDebuggerPaused(event)
</span><span class="cx">     {
</span><del>-        this.contentView.element.insertBefore(this._callStackSection.element, this.contentView.element.firstChild);
</del><ins>+        this.contentView.element.insertBefore(this._callStackContainer, this.contentView.element.firstChild);
</ins><span class="cx"> 
</span><span class="cx">         if (this._updatePauseReason())
</span><del>-            this.contentView.element.insertBefore(this._pauseReasonSection.element, this.contentView.element.firstChild);
</del><ins>+            this.contentView.element.insertBefore(this._pauseReasonContainer, this.contentView.element.firstChild);
</ins><span class="cx"> 
</span><span class="cx">         this._debuggerPauseResumeButtonItem.enabled = true;
</span><span class="cx">         this._debuggerPauseResumeButtonItem.toggled = true;
</span><span class="lines">@@ -1651,9 +1682,9 @@
</span><span class="cx"> 
</span><span class="cx">     _handleDebuggerResumed(event)
</span><span class="cx">     {
</span><del>-        this._callStackSection.element.remove();
</del><ins>+        this._callStackContainer.remove();
</ins><span class="cx"> 
</span><del>-        this._pauseReasonSection.element.remove();
</del><ins>+        this._pauseReasonContainer.remove();
</ins><span class="cx"> 
</span><span class="cx">         this._debuggerPauseResumeButtonItem.enabled = true;
</span><span class="cx">         this._debuggerPauseResumeButtonItem.toggled = false;
</span></span></pre>
</div>
</div>

</body>
</html>