Skip to content
Permalink
Browse files
Web Inspector: Change minimum width of #tab-browser to a more reasona…
…ble value

https://bugs.webkit.org/show_bug.cgi?id=217998

Patch by Patrick Angle <pangle@apple.com> on 2020-10-26
Reviewed by Brian Burg.

Adjusted the minimum width of the #tab-browser to be 200px, which is a more reasonable minimum usable width.
Additionally, adjusted the threshold for which multiple sidebars are shown by 50px so that the size of the
#tab-browser does not have to become its minimum width before hiding the additional sidebars.

* UserInterface/Base/Main.js:
* UserInterface/Views/Main.css:
(#tab-browser):
* UserInterface/Views/MultiSidebar.js:
(WI.MultiSidebar.prototype._updateMinimumWidthForMultipleSidebars):

Canonical link: https://commits.webkit.org/230884@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@268981 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
patrickangle authored and webkit-commit-queue committed Oct 26, 2020
1 parent f6c05d5 commit 9bdd89fc353e38e5f63460242719841b7afdfe45
Showing 4 changed files with 25 additions and 3 deletions.
@@ -1,3 +1,20 @@
2020-10-26 Patrick Angle <pangle@apple.com>

Web Inspector: Change minimum width of #tab-browser to a more reasonable value
https://bugs.webkit.org/show_bug.cgi?id=217998

Reviewed by Brian Burg.

Adjusted the minimum width of the #tab-browser to be 200px, which is a more reasonable minimum usable width.
Additionally, adjusted the threshold for which multiple sidebars are shown by 50px so that the size of the
#tab-browser does not have to become its minimum width before hiding the additional sidebars.

* UserInterface/Base/Main.js:
* UserInterface/Views/Main.css:
(#tab-browser):
* UserInterface/Views/MultiSidebar.js:
(WI.MultiSidebar.prototype._updateMinimumWidthForMultipleSidebars):

2020-10-23 Nikita Vasilyev <nvasilyev@apple.com>

Web Inspector: Typo in experimentalEnableStyelsJumpToVariableDeclaration
@@ -1323,7 +1323,7 @@ WI.getMaximumSidebarWidth = function(sidebar)
{
console.assert(sidebar instanceof WI.Sidebar);

const minimumContentBrowserWidth = 100; // Keep in sync with `#tab-browser`
const minimumContentBrowserWidth = 200; // Keep in sync with `#tab-browser`

let minimumWidth = window.innerWidth - minimumContentBrowserWidth;
let tabContentView = WI.tabBrowser.selectedTabContentView;
@@ -182,7 +182,7 @@ body.docked:matches(.right, .left) #navigation-sidebar.collapsed > .resizer {

#tab-browser {
flex: 1;
min-width: 100px; /* Keep in sync with `WI.getMaximumSidebarWidth(...) -> const minimumContentBrowserWidth` */
min-width: 200px; /* Keep in sync with `WI.getMaximumSidebarWidth(...) -> const minimumContentBrowserWidth` */
}

#details-sidebar {
@@ -186,7 +186,12 @@ WI.MultiSidebar = class MultiSidebar extends WI.Sidebar

_updateMinimumWidthForMultipleSidebars()
{
let requiredMinimumWidth = this.primarySidebar.minimumWidth;
// A 50px of additional required space helps make sure we collapse the multiple sidebars at an appropriate width
// without preventing the user from sizing the single sidebar to fill up to the minimum width of the
// #tab-browser once the sidebars are collapsed.
const minimumWidthEasement = 50;

let requiredMinimumWidth = this.primarySidebar.minimumWidth + minimumWidthEasement;
for (let sidebarPanel of this.sidebarPanels) {
if (sidebarPanel.allowExclusivePresentation)
requiredMinimumWidth += Math.max(WI.Sidebar.AbsoluteMinimumWidth, sidebarPanel.minimumWidth);

0 comments on commit 9bdd89f

Please sign in to comment.