Modified: trunk/Source/WebInspectorUI/ChangeLog (272933 => 272934)
--- trunk/Source/WebInspectorUI/ChangeLog 2021-02-16 23:28:32 UTC (rev 272933)
+++ trunk/Source/WebInspectorUI/ChangeLog 2021-02-16 23:36:08 UTC (rev 272934)
@@ -1,3 +1,33 @@
+2021-02-16 Razvan Caliman <rcali...@apple.com>
+
+ Web Inspector: Grid list in Layout panel missing empty message
+ https://bugs.webkit.org/show_bug.cgi?id=221763
+ <rdar://problem/74242610>
+
+ 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):
+
2021-02-11 Razvan Caliman <rcali...@apple.com>
Web Inspector: Add settings UI for CSS Grid overlay
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (272933 => 272934)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2021-02-16 23:28:32 UTC (rev 272933)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2021-02-16 23:36:08 UTC (rev 272934)
@@ -939,6 +939,8 @@
localizedStrings["No Attributes"] = "No Attributes";
localizedStrings["No Box Model Information"] = "No Box Model Information";
localizedStrings["No CSS Changes"] = "No CSS Changes";
+/* Message shown when there are no CSS Grid contexts on the inspected page. */
+localizedStrings["No CSS Grid Contexts @ Layout Details Sidebar Panel"] = "No CSS Grid Contexts";
localizedStrings["No Canvas Contexts"] = "No Canvas Contexts";
localizedStrings["No Canvas Selected"] = "No Canvas Selected";
localizedStrings["No Chart Available"] = "No Chart Available";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js (272933 => 272934)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js 2021-02-16 23:28:32 UTC (rev 272933)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js 2021-02-16 23:36:08 UTC (rev 272934)
@@ -23,6 +23,8 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
+// FIXME: <https://webkit.org/b/152269> convert `WI.CSSGridSection` to be a subclass of `WI.DetailsSectionRow`
+
WI.CSSGridSection = class CSSGridSection extends WI.View
{
constructor()
@@ -35,6 +37,14 @@
this._checkboxElementByNodeMap = new WeakMap;
}
+ // Public
+
+ set gridNodeSet(value)
+ {
+ this._gridNodeSet = value;
+ this.needsLayout();
+ }
+
// Protected
attached()
@@ -41,16 +51,12 @@
{
super.attached();
- WI.DOMNode.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayStateChanged, this);
WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._handleGridOverlayStateChanged, this);
-
- this._refreshGridNodeSet();
}
detached()
{
- WI.DOMNode.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayStateChanged, this);
WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._handleGridOverlayStateChanged, this);
@@ -123,21 +129,4 @@
checkboxElement.checked = event.type === WI.OverlayManager.Event.GridOverlayShown;
}
-
- _handleLayoutContextTypeChanged(event)
- {
- let domNode = event.target;
- if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid)
- this._gridNodeSet.add(domNode);
- else
- this._gridNodeSet.delete(domNode);
-
- this.needsLayout();
- }
-
- _refreshGridNodeSet()
- {
- this._gridNodeSet = new Set(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid));
- this.needsLayout();
- }
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.js (272933 => 272934)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.js 2021-02-16 23:28:32 UTC (rev 272933)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.js 2021-02-16 23:36:08 UTC (rev 272934)
@@ -29,6 +29,7 @@
{
super("layout-details", WI.UIString("Layout", "Layout @ Styles Sidebar", "Title of the CSS style panel."));
+ this._gridNodeSet = new Set;
this._nodeStyles = null;
this.element.classList.add("layout-panel");
}
@@ -75,13 +76,18 @@
return nodeToInspect.nodeType() === Node.ELEMENT_NODE;
}
+ // Protected
+
attached()
{
super.attached();
+ WI.DOMNode.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
WI.Frame.addEventListener(WI.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
WI.cssManager.layoutContextTypeChangedMode = WI.CSSManager.LayoutContextTypeChangedMode.All;
+
+ this._refreshGridNodeSet();
}
detached()
@@ -88,13 +94,12 @@
{
WI.cssManager.layoutContextTypeChangedMode = WI.CSSManager.LayoutContextTypeChangedMode.Observed;
+ WI.DOMNode.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
WI.Frame.removeEventListener(WI.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
super.detached();
}
- // Protected
-
initialLayout()
{
this._boxModelDiagramRow = new WI.BoxModelDetailsSectionRow;
@@ -102,14 +107,12 @@
let boxModelSection = new WI.DetailsSection("layout-box-model", WI.UIString("Box Model"), [boxModelGroup]);
this.contentView.element.appendChild(boxModelSection.element);
- let cssGridRow = new WI.DetailsSectionRow;
- let gridGroup = new WI.DetailsSectionGroup([cssGridRow]);
- let gridSection = new WI.DetailsSection("layout-css-grid", WI.UIString("Grid", "Grid @ Elements details sidebar", "CSS Grid layout section name"), [gridGroup]);
- this.contentView.element.appendChild(gridSection.element);
+ 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."));
+ let gridGroup = new WI.DetailsSectionGroup([this._gridDetailsSectionRow]);
+ let gridDetailsSection = new WI.DetailsSection("layout-css-grid", WI.UIString("Grid", "Grid @ Elements details sidebar", "CSS Grid layout section name"), [gridGroup]);
+ this.contentView.element.appendChild(gridDetailsSection.element);
- let cssGridSection = new WI.CSSGridSection;
- cssGridRow.element.appendChild(cssGridSection.element);
- this.addSubview(cssGridSection);
+ this._gridSection = new WI.CSSGridSection;
}
layout()
@@ -116,6 +119,22 @@
{
super.layout();
+ if (!this._gridNodeSet.size) {
+ this._gridDetailsSectionRow.showEmptyMessage();
+
+ if (this._gridSection.isAttached)
+ this.removeSubview(this._gridSection);
+
+ } else {
+ this._gridDetailsSectionRow.hideEmptyMessage();
+ this._gridDetailsSectionRow.element.appendChild(this._gridSection.element);
+
+ if (!this._gridSection.isAttached)
+ this.addSubview(this._gridSection);
+
+ this._gridSection.gridNodeSet = this._gridNodeSet;
+ }
+
if (this._boxModelDiagramRow.nodeStyles !== this._nodeStyles)
this._boxModelDiagramRow.nodeStyles = this._nodeStyles;
}
@@ -122,6 +141,17 @@
// Private
+ _handleLayoutContextTypeChanged(event)
+ {
+ let domNode = event.target;
+ if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid)
+ this._gridNodeSet.add(domNode);
+ else
+ this._gridNodeSet.delete(domNode);
+
+ this.needsLayout();
+ }
+
_mainResourceDidChange(event)
{
if (!event.target.isMainFrame())
@@ -141,4 +171,9 @@
if (this.isAttached)
this._nodeStyles?.refresh();
}
+
+ _refreshGridNodeSet()
+ {
+ this._gridNodeSet = new Set(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid));
+ }
};
