Changeset 248737 in webkit

Timestamp:

Aug 15, 2019, 12:18:43 PM (7 years ago)

Author:

Devin Rousso

Message:

Web Inspector: Sources: the "No Filter Results" message sits on top of all of the content, preventing any interaction
​https://bugs.webkit.org/show_bug.cgi?id=200755

Reviewed by Joseph Pecoraro.

• UserInterface/Views/SourcesNavigationSidebarPanel.js:

(WI.SourcesNavigationSidebarPanel):

• UserInterface/Views/SourcesNavigationSidebarPanel.css:

(.sidebar > .panel.navigation.sources > .content > .resources-container): Added.
(@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container)): Added.
(@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > .call-stack-container):
(@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > .breakpoints-container):
(@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > .resources-container): Added.
(@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources)): Deleted.
(@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > .resources): Deleted.
Wrap the resources WI.TreeOutline in a <div> so the empty message placeholder that gets
inserted after it can be constrained to the size of the WI.TreeOutline.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/SourcesNavigationSidebarPanel.css (modified) (4 diffs)
• UserInterface/Views/SourcesNavigationSidebarPanel.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-08-15  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Sources: the "No Filter Results" message sits on top of all of the content, preventing any interaction
+        https://bugs.webkit.org/show_bug.cgi?id=200755
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Views/SourcesNavigationSidebarPanel.js:
+        (WI.SourcesNavigationSidebarPanel):
+        * UserInterface/Views/SourcesNavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation.sources > .content > .resources-container): Added.
+        (@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container)): Added.
+        (@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > .call-stack-container):
+        (@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > .breakpoints-container):
+        (@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > .resources-container): Added.
+        (@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources)): Deleted.
+        (@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > .resources): Deleted.
+        Wrap the resources `WI.TreeOutline` in a <div> so the empty message placeholder that gets
+        inserted after it can be constrained to the size of the `WI.TreeOutline`.
+
 2019-08-15  Devin Rousso  <drousso@apple.com>
 

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

@@ -93 +93 @@
 }
 
+.sidebar > .panel.navigation.sources > .content > .resources-container {
+    position: relative;
+}
+
 .sidebar > .panel.navigation.sources > .content .tree-outline.single-thread {
     -webkit-margin-start: -10px;
@@ -112 +116 @@
     }
 
-    .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources) {
+    .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container) {
         height: 100%;
-        max-height: fit-content;
         overflow-y: auto;
     }
@@ -121 +124 @@
         flex-grow: 3;
         flex-shrink: 2;
+        max-height: fit-content;
     }
 
@@ -126 +130 @@
         flex-grow: 2;
         flex-shrink: 3;
+        max-height: fit-content;
     }
 
-    .sidebar > .panel.navigation.sources > .content > .resources {
+    .sidebar > .panel.navigation.sources > .content > .resources-container {
         flex-grow: 1;
         flex-shrink: 3;

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

@@ -234 +234 @@
         this._resourcesNavigationBar.addNavigationItem(resourceGroupingModeNavigationItem);
 
+        let resourcesContainer = document.createElement("div");
+        resourcesContainer.classList.add("resources-container");
+        this.contentView.element.insertBefore(resourcesContainer, this._resourcesNavigationBar.element.nextSibling);
+
         this._resourcesTreeOutline = this.contentTreeOutline;
-        this._resourcesTreeOutline.element.classList.add("resources");
         this._resourcesTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
         this._resourcesTreeOutline.includeSourceMapResourceChildren = true;
-        this.contentView.element.insertBefore(this._resourcesTreeOutline.element, this._resourcesNavigationBar.element.nextSibling);
+        resourcesContainer.appendChild(this._resourcesTreeOutline.element);
 
         let onlyShowResourcesWithIssuesFilterFunction = (treeElement) => {