Cherry-pick 278208@main (2a15afd). https://bugs.webkit.org/show_bug.c…

…gi?id=273506 Web Inspector: Top or bottom of Web Inspector is cut off on short viewports 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 Canonical link: https://commits.webkit.org/274313.255@webkitglib/2.44
WebKit · May 16, 2024 · 5a640a0 · 5a640a0
1 parent 5a9ac95
commit 5a640a0
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;