Web Inspector: Top or bottom of Web Inspector is cut off on short vie…

…wports https://bugs.webkit.org/show_bug.cgi?id=273506 rdar://117272735 Reviewed by Devin Rousso. The Console Drawer was allowed to be resized to an arbitrarily capped maximum height of `<div id="main">` that did not take into account the minimum height defined by the Tab Browser or the space taken up by the Quick Console. Their common container is an absolutely-positioned flex container that has its overflow hidden by `overflow: hidden` on the Web Inspector `<body>`. So when the Console Drawer was oversized, it pushed either the Quick Console or the top of the Tab bar beyond the visible viewport, depending on the successive layout operations (CSS and programmatic) that occur during Web Inspector launch. The patch sets a maximum height for the Console Drawer that is calculated explicitly. * Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.js: (WI.ConsoleDrawer.prototype._updateDrawerHeight): * Source/WebInspectorUI/UserInterface/Views/QuickConsole.js: * Source/WebInspectorUI/UserInterface/Views/Variables.css: (:root): Canonical link: https://commits.webkit.org/278208@main
WebKit · May 1, 2024 · 2a15afd · 2a15afd
1 parent 989aca0
commit 2a15afd
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.js b/Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.js
@@ -154,7 +154,7 @@ WI.ConsoleDrawer = class ConsoleDrawer extends WI.ContentBrowser
     _updateDrawerHeight(height)
     {
         const minimumHeight = 64;
-        const maximumHeight = this.element.parentNode.offsetHeight - 100;
+        const maximumHeight = this.element.parentNode.offsetHeight - WI.TabBrowser.MinimumHeight - WI.QuickConsole.MinimumHeight;
 
         let heightCSSValue = Number.constrain(height, minimumHeight, maximumHeight) + "px";
         if (this.element.style.height === heightCSSValue)

diff --git a/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js b/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js
@@ -467,3 +467,5 @@ WI.QuickConsole = class QuickConsole extends WI.View
         this.element.classList.toggle("showing-log", WI.isShowingConsoleTab() || WI.isShowingSplitConsole());
     }
 };
+
+WI.QuickConsole.MinimumHeight = 30; /* Keep in sync with `--console-prompt-min-height` */
diff --git a/Source/WebInspectorUI/UserInterface/Views/Variables.css b/Source/WebInspectorUI/UserInterface/Views/Variables.css
@@ -105,7 +105,7 @@
     --yellow-highlight-text-color: var(--text-color);
 
     --console-secondary-text-color: hsla(0, 0%, 0%, 0.33);
-    --console-prompt-min-height: 30px;
+    --console-prompt-min-height: 30px; /* Keep in sync with `WI.QuickConsole.MinimumHeight` */
 
     --message-text-view-font-size: 16px;
     --message-text-view-large-font-size: 28px;