Web Inspector: Sources: the "No Filter Results" message sits on top of all of the...
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 15 Aug 2019 19:18:43 +0000 (19:18 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 15 Aug 2019 19:18:43 +0000 (19:18 +0000)
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`.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@248737 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js

index 9f868ae..c2319b9 100644 (file)
@@ -1,5 +1,25 @@
 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>
+
         Web Inspector: Layers: background of 3D area doesn't update when transitioning to/from Dark mode
         https://bugs.webkit.org/show_bug.cgi?id=200775
 
index 4a2f0f8..cd36d74 100644 (file)
     background-color: var(--panel-background-color);
 }
 
+.sidebar > .panel.navigation.sources > .content > .resources-container {
+    position: relative;
+}
+
 .sidebar > .panel.navigation.sources > .content .tree-outline.single-thread {
     -webkit-margin-start: -10px;
 }
         --details-section-header-top: 0;
     }
 
-    .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;
     }
 
     .sidebar > .panel.navigation.sources > .content > .call-stack-container {
         flex-grow: 3;
         flex-shrink: 2;
+        max-height: fit-content;
     }
 
     .sidebar > .panel.navigation.sources > .content > .breakpoints-container {
         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;
     }
index f725da5..aa0c0f8 100644 (file)
@@ -233,11 +233,14 @@ WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends W
         WI.addMouseDownContextMenuHandlers(resourceGroupingModeNavigationItem.element, this._populateResourceGroupingModeContextMenu.bind(this));
         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) => {
             if (treeElement.treeOutline !== this._resourcesTreeOutline)