Changeset 272934 in webkit


Ignore:
Timestamp:
Feb 16, 2021 3:36:08 PM (17 months ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: Grid list in Layout panel missing empty message
​https://bugs.webkit.org/show_bug.cgi?id=221763
<rdar://problem/74242610>

Patch by Razvan Caliman <Razvan Caliman> on 2021-02-16
Reviewed by BJ Burg.

Show a message instead of an empty list in the Layout sidebar panel
when there are no CSS Grid contexts found on the inspected page.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Views/CSSGridSection.js:

(WI.CSSGridSection.prototype.set gridNodeSet):
(WI.CSSGridSection.prototype.attached):
(WI.CSSGridSection.prototype.detached):
(WI.CSSGridSection.prototype._handleGridOverlayStateChanged):
(WI.CSSGridSection):
Move logic to update the gridNodeSet from CSSGridSection up to LayoutDetailsSidebarPanel
so the parent view can toggle between the empty message and the populated CSS grid section accordingly.

  • UserInterface/Views/LayoutDetailsSidebarPanel.js:

(WI.LayoutDetailsSidebarPanel):
(WI.LayoutDetailsSidebarPanel.prototype.attached):
(WI.LayoutDetailsSidebarPanel.prototype.detached):
(WI.LayoutDetailsSidebarPanel.prototype.initialLayout):
(WI.LayoutDetailsSidebarPanel.prototype.layout):
(WI.LayoutDetailsSidebarPanel.prototype._handleLayoutContextTypeChanged):
(WI.LayoutDetailsSidebarPanel.prototype._refreshGridNodeSet):

Location:
trunk/Source/WebInspectorUI
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r272737 r272934  
     12021-02-16  Razvan Caliman  <rcaliman@apple.com>
     2
     3        Web Inspector: Grid list in Layout panel missing empty message
     4        https://bugs.webkit.org/show_bug.cgi?id=221763
     5        <rdar://problem/74242610>
     6
     7        Reviewed by BJ Burg.
     8
     9        Show a message instead of an empty list in the Layout sidebar panel
     10        when there are no CSS Grid contexts found on the inspected page.
     11
     12        * Localizations/en.lproj/localizedStrings.js:
     13        * UserInterface/Views/CSSGridSection.js:
     14        (WI.CSSGridSection.prototype.set gridNodeSet):
     15        (WI.CSSGridSection.prototype.attached):
     16        (WI.CSSGridSection.prototype.detached):
     17        (WI.CSSGridSection.prototype._handleGridOverlayStateChanged):
     18        (WI.CSSGridSection):
     19        Move logic to update the `gridNodeSet` from `CSSGridSection` up to `LayoutDetailsSidebarPanel`
     20        so the parent view can toggle between the empty message and the populated CSS grid section accordingly.
     21
     22        * UserInterface/Views/LayoutDetailsSidebarPanel.js:
     23        (WI.LayoutDetailsSidebarPanel):
     24        (WI.LayoutDetailsSidebarPanel.prototype.attached):
     25        (WI.LayoutDetailsSidebarPanel.prototype.detached):
     26        (WI.LayoutDetailsSidebarPanel.prototype.initialLayout):
     27        (WI.LayoutDetailsSidebarPanel.prototype.layout):
     28        (WI.LayoutDetailsSidebarPanel.prototype._handleLayoutContextTypeChanged):
     29        (WI.LayoutDetailsSidebarPanel.prototype._refreshGridNodeSet):
     30
    1312021-02-11  Razvan Caliman  <rcaliman@apple.com>
    232

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r272737 r272934  
    940940localizedStrings["No Box Model Information"] = "No Box Model Information";
    941941localizedStrings["No CSS Changes"] = "No CSS Changes";
     942/* Message shown when there are no CSS Grid contexts on the inspected page. */
     943localizedStrings["No CSS Grid Contexts @ Layout Details Sidebar Panel"] = "No CSS Grid Contexts";
    942944localizedStrings["No Canvas Contexts"] = "No Canvas Contexts";
    943945localizedStrings["No Canvas Selected"] = "No Canvas Selected";

  • trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js

    r272737 r272934  
    2424 */
    2525
     26// FIXME: <https://webkit.org/b/152269> convert `WI.CSSGridSection` to be a subclass of `WI.DetailsSectionRow`
     27
    2628WI.CSSGridSection = class CSSGridSection extends WI.View
    2729{
    … …  
    3638    }
    3739
     40    // Public
     41
     42    set gridNodeSet(value)
     43    {
     44        this._gridNodeSet = value;
     45        this.needsLayout();
     46    }
     47
    3848    // Protected
    3949
    … …  
    4252        super.attached();
    4353
    44         WI.DOMNode.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
    4554        WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayStateChanged, this);
    4655        WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._handleGridOverlayStateChanged, this);
    47 
    48         this._refreshGridNodeSet();
    4956    }
    5057
    5158    detached()
    5259    {
    53         WI.DOMNode.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
    5460        WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayStateChanged, this);
    5561        WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._handleGridOverlayStateChanged, this);
    … …  
    124130        checkboxElement.checked = event.type === WI.OverlayManager.Event.GridOverlayShown;
    125131    }
    126 
    127     _handleLayoutContextTypeChanged(event)
    128     {
    129         let domNode = event.target;
    130         if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid)
    131             this._gridNodeSet.add(domNode);
    132         else
    133             this._gridNodeSet.delete(domNode);
    134 
    135         this.needsLayout();
    136     }
    137 
    138     _refreshGridNodeSet()
    139     {
    140         this._gridNodeSet = new Set(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid));
    141         this.needsLayout();
    142     }
    143132};

  • trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.js

    r272670 r272934  
    3030        super("layout-details", WI.UIString("Layout", "Layout @ Styles Sidebar", "Title of the CSS style panel."));
    3131
     32        this._gridNodeSet = new Set;
    3233        this._nodeStyles = null;
    3334        this.element.classList.add("layout-panel");
    … …  
    7677    }
    7778
     79    // Protected
     80
    7881    attached()
    7982    {
    8083        super.attached();
    8184
     85        WI.DOMNode.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
    8286        WI.Frame.addEventListener(WI.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
    8387
    8488        WI.cssManager.layoutContextTypeChangedMode = WI.CSSManager.LayoutContextTypeChangedMode.All;
     89
     90        this._refreshGridNodeSet();
    8591    }
    8692
    … …  
    8995        WI.cssManager.layoutContextTypeChangedMode = WI.CSSManager.LayoutContextTypeChangedMode.Observed;
    9096
     97        WI.DOMNode.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
    9198        WI.Frame.removeEventListener(WI.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
    9299
    93100        super.detached();
    94101    }
    95 
    96     // Protected
    97102
    98103    initialLayout()
    … …  
    103108        this.contentView.element.appendChild(boxModelSection.element);
    104109
    105         let cssGridRow = new WI.DetailsSectionRow;
    106         let gridGroup = new WI.DetailsSectionGroup([cssGridRow]);
    107         let gridSection = new WI.DetailsSection("layout-css-grid", WI.UIString("Grid", "Grid @ Elements details sidebar", "CSS Grid layout section name"), [gridGroup]);
    108         this.contentView.element.appendChild(gridSection.element);
     110        this._gridDetailsSectionRow = new WI.DetailsSectionRow(WI.UIString("No CSS Grid Contexts", "No CSS Grid Contexts @ Layout Details Sidebar Panel", "Message shown when there are no CSS Grid contexts on the inspected page."));
     111        let gridGroup = new WI.DetailsSectionGroup([this._gridDetailsSectionRow]);
     112        let gridDetailsSection = new WI.DetailsSection("layout-css-grid", WI.UIString("Grid", "Grid @ Elements details sidebar", "CSS Grid layout section name"), [gridGroup]);
     113        this.contentView.element.appendChild(gridDetailsSection.element);
    109114
    110         let cssGridSection = new WI.CSSGridSection;
    111         cssGridRow.element.appendChild(cssGridSection.element);
    112         this.addSubview(cssGridSection);
     115        this._gridSection = new WI.CSSGridSection;
    113116    }
    114117
    … …  
    117120        super.layout();
    118121
     122        if (!this._gridNodeSet.size) {
     123            this._gridDetailsSectionRow.showEmptyMessage();
     124
     125            if (this._gridSection.isAttached)
     126                this.removeSubview(this._gridSection);
     127
     128        } else {
     129            this._gridDetailsSectionRow.hideEmptyMessage();
     130            this._gridDetailsSectionRow.element.appendChild(this._gridSection.element);
     131
     132            if (!this._gridSection.isAttached)
     133                this.addSubview(this._gridSection);
     134
     135            this._gridSection.gridNodeSet = this._gridNodeSet;
     136        }
     137
    119138        if (this._boxModelDiagramRow.nodeStyles !== this._nodeStyles)
    120139            this._boxModelDiagramRow.nodeStyles = this._nodeStyles;
    … …  
    122141
    123142    // Private
     143
     144    _handleLayoutContextTypeChanged(event)
     145    {
     146        let domNode = event.target;
     147        if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid)
     148            this._gridNodeSet.add(domNode);
     149        else
     150            this._gridNodeSet.delete(domNode);
     151
     152        this.needsLayout();
     153    }
    124154
    125155    _mainResourceDidChange(event)
    … …  
    142172            this._nodeStyles?.refresh();
    143173    }
     174
     175    _refreshGridNodeSet()
     176    {
     177        this._gridNodeSet = new Set(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid));
     178    }
    144179};
Note: See TracChangeset for help on using the changeset viewer.