Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web Inspector: Top or bottom of Web Inspector is cut off on short viewports #27939

Conversation

rcaliman-apple
Copy link
Contributor

@rcaliman-apple rcaliman-apple commented Apr 30, 2024

2a15afd

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

774d9c3

Misc iOS, tvOS & watchOS macOS Linux Windows
βœ… πŸ§ͺ style βœ… πŸ›  ios βœ… πŸ›  mac βœ… πŸ›  wpe βœ… πŸ›  wincairo
βœ… πŸ›  ios-sim βœ… πŸ›  mac-AS-debug βœ… πŸ§ͺ wpe-wk2
βœ… πŸ§ͺ webkitperl βœ… πŸ§ͺ ios-wk2   πŸ§ͺ api-mac βœ… πŸ§ͺ api-wpe
βœ… πŸ§ͺ ios-wk2-wpt βœ… πŸ§ͺ mac-wk1 βœ… πŸ›  wpe-skia
  πŸ§ͺ api-ios βœ… πŸ§ͺ mac-wk2 βœ… πŸ›  gtk
βœ… πŸ›  tv βœ… πŸ§ͺ mac-AS-debug-wk2 βœ… πŸ§ͺ gtk-wk2
βœ… πŸ›  tv-sim βœ… πŸ§ͺ mac-wk2-stress ❌ πŸ§ͺ api-gtk
βœ… πŸ›  πŸ§ͺ merge βœ… πŸ›  watch
βœ… πŸ›  watch-sim

@rcaliman-apple rcaliman-apple self-assigned this Apr 30, 2024
@rcaliman-apple rcaliman-apple added the Web Inspector Bugs related to the WebKit Web Inspector. label Apr 30, 2024
@rcaliman-apple
Copy link
Contributor Author

Using steps to reproduce from https://bugs.webkit.org/show_bug.cgi?id=273506

Before

Screenshot 2024-04-30 at 20 15 25

After

Screenshot 2024-04-30 at 20 15 00

@rcaliman-apple rcaliman-apple force-pushed the eng/Web-Inspector-Top-or-bottom-of-Web-Inspector-is-cut-off-on-short-viewports branch from 349cc7a to 774d9c3 Compare May 1, 2024 09:57
@rcaliman-apple rcaliman-apple added the merge-queue Applied to send a pull request to merge-queue label May 1, 2024
@webkit-commit-queue webkit-commit-queue force-pushed the eng/Web-Inspector-Top-or-bottom-of-Web-Inspector-is-cut-off-on-short-viewports branch from 774d9c3 to 56b5141 Compare May 1, 2024 12:05
…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-commit-queue webkit-commit-queue force-pushed the eng/Web-Inspector-Top-or-bottom-of-Web-Inspector-is-cut-off-on-short-viewports branch from 56b5141 to 2a15afd Compare May 1, 2024 12:07
@webkit-commit-queue
Copy link
Collaborator

Committed 278208@main (2a15afd): https://commits.webkit.org/278208@main

Reviewed commits have been landed. Closing PR #27939 and removing active labels.

@webkit-commit-queue webkit-commit-queue merged commit 2a15afd into WebKit:main May 1, 2024
@webkit-commit-queue webkit-commit-queue removed the merge-queue Applied to send a pull request to merge-queue label May 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Web Inspector Bugs related to the WebKit Web Inspector.
Projects
None yet
4 participants