Title: [272182] trunk/Source/WebInspectorUI
- Revision
- 272182
- Author
- [email protected]
- Date
- 2021-02-01 18:10:37 -0800 (Mon, 01 Feb 2021)
Log Message
Web Inspector: add Box Model into Layout panel
https://bugs.webkit.org/show_bug.cgi?id=220987
Reviewed by BJ Burg.
Add Box Model section to the experimental Layout panel.
* UserInterface/Views/LayoutDetailsSidebarPanel.js:
(WI.LayoutDetailsSidebarPanel):
(WI.LayoutDetailsSidebarPanel.prototype.get minimumWidth):
(WI.LayoutDetailsSidebarPanel.prototype.inspect):
(WI.LayoutDetailsSidebarPanel.prototype.initialLayout):
(WI.LayoutDetailsSidebarPanel.prototype.layout):
(WI.LayoutDetailsSidebarPanel.prototype._nodeStylesRefreshed):
(WI.LayoutDetailsSidebarPanel.prototype._nodeStylesNeedsRefreshed):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (272181 => 272182)
--- trunk/Source/WebInspectorUI/ChangeLog 2021-02-02 01:03:54 UTC (rev 272181)
+++ trunk/Source/WebInspectorUI/ChangeLog 2021-02-02 02:10:37 UTC (rev 272182)
@@ -1,3 +1,21 @@
+2021-02-01 Nikita Vasilyev <[email protected]>
+
+ Web Inspector: add Box Model into Layout panel
+ https://bugs.webkit.org/show_bug.cgi?id=220987
+
+ Reviewed by BJ Burg.
+
+ Add Box Model section to the experimental Layout panel.
+
+ * UserInterface/Views/LayoutDetailsSidebarPanel.js:
+ (WI.LayoutDetailsSidebarPanel):
+ (WI.LayoutDetailsSidebarPanel.prototype.get minimumWidth):
+ (WI.LayoutDetailsSidebarPanel.prototype.inspect):
+ (WI.LayoutDetailsSidebarPanel.prototype.initialLayout):
+ (WI.LayoutDetailsSidebarPanel.prototype.layout):
+ (WI.LayoutDetailsSidebarPanel.prototype._nodeStylesRefreshed):
+ (WI.LayoutDetailsSidebarPanel.prototype._nodeStylesNeedsRefreshed):
+
2021-02-01 Yusuke Suzuki <[email protected]>
[JSC] Add @ in Error.stack if URL exists
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.js (272181 => 272182)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.js 2021-02-02 01:03:54 UTC (rev 272181)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.js 2021-02-02 02:10:37 UTC (rev 272182)
@@ -29,11 +29,47 @@
{
super("layout-details", WI.UIString("Layout", "Layout @ Styles Sidebar", "Title of the CSS style panel."));
+ this._nodeStyles = null;
this.element.classList.add("layout-panel");
}
// Public
+ get minimumWidth()
+ {
+ return this._boxModelDiagramRow?.minimumWidth ?? 0;
+ }
+
+ inspect(objects)
+ {
+ // Layout panel doesn't show when hasDOMNode is false.
+ let hasDOMNode = super.inspect(objects);
+ if (!hasDOMNode)
+ return false;
+
+ let stylesForNode = WI.cssManager.stylesForNode(this.domNode);
+ stylesForNode.refreshIfNeeded().then((nodeStyles) => {
+ if (nodeStyles === this._nodeStyles)
+ return;
+
+ if (this._nodeStyles) {
+ this._nodeStyles.removeEventListener(WI.DOMNodeStyles.Event.Refreshed, this._nodeStylesRefreshed, this);
+ this._nodeStyles.removeEventListener(WI.DOMNodeStyles.Event.NeedsRefresh, this._nodeStylesNeedsRefreshed, this);
+ }
+
+ this._nodeStyles = nodeStyles;
+
+ if (this._nodeStyles) {
+ this._nodeStyles.addEventListener(WI.DOMNodeStyles.Event.Refreshed, this._nodeStylesRefreshed, this);
+ this._nodeStyles.addEventListener(WI.DOMNodeStyles.Event.NeedsRefresh, this._nodeStylesNeedsRefreshed, this);
+ }
+
+ this.needsLayout();
+ });
+
+ return hasDOMNode;
+ }
+
supportsDOMNode(nodeToInspect)
{
return nodeToInspect.nodeType() === Node.ELEMENT_NODE;
@@ -57,12 +93,18 @@
initialLayout()
{
- // FIXME: Move the Box Model section here from the Computed panel.
+ this._boxModelDiagramRow = new WI.BoxModelDetailsSectionRow;
+ let boxModelGroup = new WI.DetailsSectionGroup([this._boxModelDiagramRow]);
+ let boxModelSection = new WI.DetailsSection("layout-box-model", WI.UIString("Box Model"), [boxModelGroup]);
+ this.contentView.element.appendChild(boxModelSection.element);
}
layout()
{
super.layout();
+
+ if (this._boxModelDiagramRow.nodeStyles !== this._nodeStyles)
+ this._boxModelDiagramRow.nodeStyles = this._nodeStyles;
}
// Private
@@ -74,4 +116,16 @@
this.needsLayout();
}
+
+ _nodeStylesRefreshed()
+ {
+ if (this.isAttached)
+ this.needsLayout();
+ }
+
+ _nodeStylesNeedsRefreshed()
+ {
+ if (this.isAttached)
+ this._nodeStyles?.refresh();
+ }
};
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
