Changeset 274465 in webkit

Timestamp:

Mar 15, 2021 10:08:03 PM (16 months ago)

Author:

Patrick Angle

Message:

Web Inspector: Styles sidebar pseudo-class checkboxes appear cramped after resizing window at narrow widths
​https://bugs.webkit.org/show_bug.cgi?id=222990

Reviewed by Devin Rousso.

Fixed two compounding bugs that meant that a sidebar could end up using the base minimum width of 250px
instead of the actual minimum width as reported by the selected panel.

• UserInterface/Views/MultiSidebar.js:

(WI.MultiSidebar.prototype.didInsertSidebarPanel):
(WI.MultiSidebar.prototype.didRemoveSidebarPanel):
(WI.MultiSidebar.prototype.didSetCollapsed):

• Drive-by: Remove unused (and always undefined) flag argument.

(WI.MultiSidebar.prototype._updateMinimumWidthForMultipleSidebars):

• Add logic to make sure we can calculate a valid _minimumWidthForMultipleSidebars, and add a mechanism to

allow ignoring the presence of a cached value to force a recalculation.
(WI.MultiSidebar.prototype.get _hasWidthForMultipleSidebars):

• Ensure if possible that there is a valid _minimumWidthForMultipleSidebars.

(WI.MultiSidebar.prototype._makeSidebarPanelExclusive):

• Sets the sidebar as non-collapsible (which sets collapsed to false) before adding the panel and setting it

as the selected panel so that we don't set the selected panel on a collapsed sidebar.

• UserInterface/Views/SingleSidebar.js:

(WI.SingleSidebar.prototype.didSetCollapsed):

• Drive-by: Remove always undefined flag argument, use this.collapsed instead.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/MultiSidebar.js (modified) (5 diffs)
• UserInterface/Views/SingleSidebar.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2021-03-15  Patrick Angle  <pangle@apple.com>
+
+        Web Inspector: `Styles` sidebar pseudo-class checkboxes appear cramped after resizing window at narrow widths
+        https://bugs.webkit.org/show_bug.cgi?id=222990
+
+        Reviewed by Devin Rousso.
+
+        Fixed two compounding bugs that meant that a sidebar could end up using the base minimum width of 250px
+        instead of the actual minimum width as reported by the selected panel.
+
+        * UserInterface/Views/MultiSidebar.js:
+        (WI.MultiSidebar.prototype.didInsertSidebarPanel):
+        (WI.MultiSidebar.prototype.didRemoveSidebarPanel):
+        (WI.MultiSidebar.prototype.didSetCollapsed):
+        - Drive-by: Remove unused (and always undefined) `flag` argument.
+        (WI.MultiSidebar.prototype._updateMinimumWidthForMultipleSidebars):
+        - Add logic to make sure we can calculate a valid `_minimumWidthForMultipleSidebars`, and add a mechanism to
+        allow ignoring the presence of a cached value to force a recalculation.
+        (WI.MultiSidebar.prototype.get _hasWidthForMultipleSidebars):
+        - Ensure if possible that there is a valid `_minimumWidthForMultipleSidebars`.
+        (WI.MultiSidebar.prototype._makeSidebarPanelExclusive):
+        - Sets the sidebar as non-collapsible (which sets `collapsed` to `false`) before adding the panel and setting it
+        as the selected panel so that we don't set the selected panel on a collapsed sidebar.
+        * UserInterface/Views/SingleSidebar.js:
+        (WI.SingleSidebar.prototype.didSetCollapsed):
+        - Drive-by: Remove always undefined `flag` argument, use `this.collapsed` instead.
+
 2021-03-11  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/MultiSidebar.js

@@ -155 +155 @@
     didInsertSidebarPanel(sidebarPanel, index)
     {
-        this._updateMinimumWidthForMultipleSidebars();
+        this._updateMinimumWidthForMultipleSidebars({ignoreExistingComputedValue: true});
         this._updateMultipleSidebarLayout();
     }
@@ -168 +168 @@
         }
 
-        this._updateMinimumWidthForMultipleSidebars();
-        this._updateMultipleSidebarLayout();
-    }
-
-    didSetCollapsed(flag)
+        this._updateMinimumWidthForMultipleSidebars({ignoreExistingComputedValue: true});
+        this._updateMultipleSidebarLayout();
+    }
+
+    didSetCollapsed()
     {
         this.primarySidebar.collapsed = this.collapsed;
+
+        this._updateMinimumWidthForMultipleSidebars({ignoreExistingComputedValue: true});
         this._updateMultipleSidebarLayout();
     }
@@ -185 +187 @@
     }
 
-    _updateMinimumWidthForMultipleSidebars()
-    {
+    _updateMinimumWidthForMultipleSidebars({ignoreExistingComputedValue} = {})
+    {
+        if (!ignoreExistingComputedValue && this._requiredMinimumWidthForMultipleSidebars)
+            return;
+
+        if (this.collapsed || !this.isAttached)
+            return;
+
         // 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
@@ -204 +212 @@
     get _hasWidthForMultipleSidebars()
     {
+        this._updateMinimumWidthForMultipleSidebars();
         return this._requiredMinimumWidthForMultipleSidebars < this.maximumWidth;
     }
@@ -240 +249 @@
 
         let sidebar = new WI.SingleSidebar(null, this.side, sidebarPanel.navigationItem.label);
+        sidebar.collapsable = false;
         sidebar.addSidebarPanel(sidebarPanel);
-        sidebar.collapsable = false;
+        sidebar.selectedSidebarPanel = sidebarPanel;
         this.addSidebar(sidebar);
-
-        sidebar.selectedSidebarPanel = sidebarPanel;
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/SingleSidebar.js

@@ -117 +117 @@
     }
 
-    didSetCollapsed(flag)
+    didSetCollapsed()
     {
         if (this.selectedSidebarPanel) {
@@ -129 +129 @@
         }
 
-        if (!flag && this._navigationBar)
+        if (!this.collapsed && this._navigationBar)
             this._navigationBar.needsLayout();
     }