Changeset 242386 in webkit

Timestamp:

Mar 4, 2019, 1:48:04 PM (7 years ago)

Author:

commit-queue@webkit.org

Message:

ITMLKit Inspector: Data Bindings / Associated Data for nodes
​https://bugs.webkit.org/show_bug.cgi?id=195290
<rdar://problem/48304019>

Patch by Joseph Pecoraro <Joseph Pecoraro> on 2019-03-04
Reviewed by Devin Rousso.

Source/JavaScriptCore:

• inspector/protocol/DOM.json:

Source/WebCore:

• inspector/agents/InspectorDOMAgent.h:
• inspector/agents/InspectorDOMAgent.cpp:

(WebCore::InspectorDOMAgent::getDataBindingsForNode):
(WebCore::InspectorDOMAgent::getAssociatedDataForNode):
Stub these for web pages, they will only be used for ITMLKit right now.

Source/WebInspectorUI:

• Localizations/en.lproj/localizedStrings.js:

New title and empty message strings.

• UserInterface/Views/DOMNodeDetailsSidebarPanel.css:

(.sidebar > .panel.dom-node-details .details-section.dom-node-associated-data > .content .row):

• UserInterface/Views/DOMNodeDetailsSidebarPanel.js:

(WI.DOMNodeDetailsSidebarPanel.prototype.initialLayout):
(WI.DOMNodeDetailsSidebarPanel.prototype.layout):
(WI.DOMNodeDetailsSidebarPanel.prototype._refreshDataBindings):
(WI.DOMNodeDetailsSidebarPanel.prototype._refreshAssociatedData):
(WI.DOMNodeDetailsSidebarPanel.prototype._attributesChanged):
New Node sections only enabled for ITMLKit WI.sharedApp.hasExtraDomains.

• UserInterface/Views/ObjectTreeView.js:

(WI.ObjectTreeView):
Provide a way, like TreeElement/View to access the ObjectTreeView from an element.

Location:

trunk/Source

Files:

• JavaScriptCore/ChangeLog (modified) (1 diff)
• JavaScriptCore/inspector/protocol/DOM.json (modified) (2 diffs)
• WebCore/ChangeLog (modified) (1 diff)
• WebCore/inspector/agents/InspectorDOMAgent.cpp (modified) (1 diff)
• WebCore/inspector/agents/InspectorDOMAgent.h (modified) (1 diff)
• WebInspectorUI/ChangeLog (modified) (1 diff)
• WebInspectorUI/Localizations/en.lproj/localizedStrings.js (modified) (5 diffs)
• WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css (modified) (1 diff)
• WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js (modified) (6 diffs)
• WebInspectorUI/UserInterface/Views/ObjectTreeView.js (modified) (1 diff)

trunk/Source/JavaScriptCore/ChangeLog

@@ +1 @@
+2019-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        ITMLKit Inspector: Data Bindings / Associated Data for nodes
+        https://bugs.webkit.org/show_bug.cgi?id=195290
+        <rdar://problem/48304019>
+
+        Reviewed by Devin Rousso.
+
+        * inspector/protocol/DOM.json:
+
 2019-03-04  Yusuke Suzuki  <ysuzuki@apple.com>
 

trunk/Source/JavaScriptCore/inspector/protocol/DOM.json

@@ -67 +67 @@
                 { "name": "pseudoElements", "type": "array", "items": { "$ref": "Node" }, "optional": true, "description": "Pseudo elements associated with this node." },
                 { "name": "contentSecurityPolicyHash", "type": "string", "optional": true, "description": "Computed SHA-256 Content Security Policy hash source for given element." }
+            ]
+        },
+        {
+            "id": "DataBinding",
+            "type": "object",
+            "description": "Relationship between data that is associated with a node and the node itself.",
+            "properties": [
+                { "name": "binding", "type": "string", "description": "The binding key that is specified." },
+                { "name": "type", "optional": true, "type": "string", "description": "A more descriptive name for the type of binding that represents this paritcular data relationship" },
+                { "name": "value", "type": "string", "description": "The value that is resolved to with this data binding relationship." }
             ]
         },
@@ -257 +267 @@
         },
         {
+            "name": "getDataBindingsForNode",
+            "description": "Returns all data binding relationships between data that is associated with the node and the node itself.",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get data bindings for." }
+            ],
+            "returns": [
+                { "name": "dataBindings", "type": "array", "items": { "$ref": "DataBinding"}, "description": "Array of binding relationships between data and node" }
+            ]
+        },
+        {
+            "name": "getAssociatedDataForNode",
+            "description": "Returns all data that has been associated with the node and is available for data binding.",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get associated data for." }
+            ],
+            "returns": [
+                { "name": "associatedData", "type": "string", "optional": true, "description": "Associated data bound to this node. Sent as a JSON string." }
+            ]
+        },
+        {
             "name": "getEventListenersForNode",
             "description": "Returns event listeners relevant to the node.",

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2019-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        ITMLKit Inspector: Data Bindings / Associated Data for nodes
+        https://bugs.webkit.org/show_bug.cgi?id=195290
+        <rdar://problem/48304019>
+
+        Reviewed by Devin Rousso.
+
+        * inspector/agents/InspectorDOMAgent.h:
+        * inspector/agents/InspectorDOMAgent.cpp:
+        (WebCore::InspectorDOMAgent::getDataBindingsForNode):
+        (WebCore::InspectorDOMAgent::getAssociatedDataForNode):
+        Stub these for web pages, they will only be used for ITMLKit right now.
+
 2019-03-04  Daniel Bates  <dabates@apple.com>
 

trunk/Source/WebCore/inspector/agents/InspectorDOMAgent.cpp

@@ -867 +867 @@
 }
 
+void InspectorDOMAgent::getDataBindingsForNode(ErrorString& errorString, int /* nodeId */, RefPtr<JSON::ArrayOf<Inspector::Protocol::DOM::DataBinding>>& /* dataBindings */)
+{
+    errorString = "Not supported"_s;
+}
+
+void InspectorDOMAgent::getAssociatedDataForNode(ErrorString& errorString, int /* nodeId */, Optional<String>& /* associatedData */)
+{
+    errorString = "Not supported"_s;
+}
+
 void InspectorDOMAgent::getEventListenersForNode(ErrorString& errorString, int nodeId, const String* objectGroup, RefPtr<JSON::ArrayOf<Inspector::Protocol::DOM::EventListener>>& listenersArray)
 {

trunk/Source/WebCore/inspector/agents/InspectorDOMAgent.h

@@ -128 +128 @@
     void setNodeValue(ErrorString&, int nodeId, const String& value) override;
     void getSupportedEventNames(ErrorString&, RefPtr<JSON::ArrayOf<String>>& eventNames) override;
+    void getDataBindingsForNode(ErrorString&, int nodeId, RefPtr<JSON::ArrayOf<Inspector::Protocol::DOM::DataBinding>>& dataArray) override;
+    void getAssociatedDataForNode(ErrorString&, int nodeId, Optional<String>& associatedData) override;
     void getEventListenersForNode(ErrorString&, int nodeId, const WTF::String* objectGroup, RefPtr<JSON::ArrayOf<Inspector::Protocol::DOM::EventListener>>& listenersArray) override;
     void setEventListenerDisabled(ErrorString&, int eventListenerId, bool disabled) override;

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        ITMLKit Inspector: Data Bindings / Associated Data for nodes
+        https://bugs.webkit.org/show_bug.cgi?id=195290
+        <rdar://problem/48304019>
+
+        Reviewed by Devin Rousso.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        New title and empty message strings.
+
+        * UserInterface/Views/DOMNodeDetailsSidebarPanel.css:
+        (.sidebar > .panel.dom-node-details .details-section.dom-node-associated-data > .content .row):
+        * UserInterface/Views/DOMNodeDetailsSidebarPanel.js:
+        (WI.DOMNodeDetailsSidebarPanel.prototype.initialLayout):
+        (WI.DOMNodeDetailsSidebarPanel.prototype.layout):
+        (WI.DOMNodeDetailsSidebarPanel.prototype._refreshDataBindings):
+        (WI.DOMNodeDetailsSidebarPanel.prototype._refreshAssociatedData):
+        (WI.DOMNodeDetailsSidebarPanel.prototype._attributesChanged):
+        New Node sections only enabled for ITMLKit `WI.sharedApp.hasExtraDomains`.
+
+        * UserInterface/Views/ObjectTreeView.js:
+        (WI.ObjectTreeView):
+        Provide a way, like TreeElement/View to access the ObjectTreeView from an element.
+
 2019-03-04  Devin Rousso  <drousso@apple.com>
 

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

@@ -130 +130 @@
 localizedStrings["Assertion with message: %s"] = "Assertion with message: %s";
 localizedStrings["Assertive"] = "Assertive";
+localizedStrings["Associated Data"] = "Associated Data";
 localizedStrings["Async audits are not supported."] = "Async audits are not supported.";
 localizedStrings["Attribute"] = "Attribute";
@@ -151 +152 @@
 localizedStrings["Beacons"] = "Beacons";
 localizedStrings["Binary Frame"] = "Binary Frame";
+localizedStrings["Binding"] = "Binding";
 localizedStrings["Block Variables"] = "Block Variables";
 localizedStrings["Body:"] = "Body:";
@@ -289 +291 @@
 localizedStrings["Damping"] = "Damping";
 localizedStrings["Data"] = "Data";
+localizedStrings["Data Bindings"] = "Data Bindings";
 localizedStrings["Data returned from the database is too large."] = "Data returned from the database is too large.";
 localizedStrings["Database"] = "Database";
@@ -639 +642 @@
 localizedStrings["No Accessibility Information"] = "No Accessibility Information";
 localizedStrings["No Application Cache information available"] = "No Application Cache information available";
+localizedStrings["No Associated Data"] = "No Associated Data";
 localizedStrings["No Attributes"] = "No Attributes";
 localizedStrings["No Audits"] = "No Audits";
@@ -647 +651 @@
 localizedStrings["No Chart Available"] = "No Chart Available";
 localizedStrings["No Child Layers"] = "No Child Layers";
+localizedStrings["No Data Bindings"] = "No Data Bindings";
 localizedStrings["No Entries"] = "No Entries";
 localizedStrings["No Event Listeners"] = "No Event Listeners";

trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css

@@ -67 +67 @@
     }
 }
+
+.sidebar > .panel.dom-node-details .details-section.dom-node-associated-data > .content .row {
+    -webkit-margin-start: 6px;
+    margin-bottom: 4px;
+}

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

@@ -102 +102 @@
         this.contentView.element.appendChild(propertiesSection.element);
         this.contentView.element.appendChild(eventListenersSection.element);
+
+        if (WI.sharedApp.hasExtraDomains) {
+            if (InspectorBackend.domains.DOM.getDataBindingsForNode) {
+                this._dataBindingsSection = new WI.DetailsSection("dom-node-data-bindings", WI.UIString("Data Bindings"), []);
+                this.contentView.element.appendChild(this._dataBindingsSection.element);
+            }
+
+            if (InspectorBackend.domains.DOM.getAssociatedDataForNode) {
+                this._associatedDataGrid = new WI.DetailsSectionRow(WI.UIString("No Associated Data"));
+
+                let associatedDataGroup = new WI.DetailsSectionGroup([this._associatedDataGrid]);
+
+                let associatedSection = new WI.DetailsSection("dom-node-associated-data", WI.UIString("Associated Data"), [associatedDataGroup]);
+                this.contentView.element.appendChild(associatedSection.element);
+            }
+        }
 
         if (this._accessibilitySupported()) {
@@ -149 +165 @@
         this._refreshProperties();
         this._refreshEventListeners();
+        this._refreshDataBindings();
+        this._refreshAssociatedData();
         this._refreshAccessibility();
     }
@@ -229 +247 @@
 
         let domNode = this.domNode;
-        RuntimeAgent.releaseObjectGroup(WI.DOMNodeDetailsSidebarPanel.PropertiesObjectGroupName);
-
-        WI.RemoteObject.resolveNode(domNode, WI.DOMNodeDetailsSidebarPanel.PropertiesObjectGroupName).then((object) => {
+
+        const objectGroup = "dom-node-details-sidebar-properties-object-group";
+        RuntimeAgent.releaseObjectGroup(objectGroup);
+
+        WI.RemoteObject.resolveNode(domNode, objectGroup).then((object) => {
             // Bail if the DOM node changed while we were waiting for the async response.
             if (this.domNode !== domNode)
@@ -410 +430 @@
 
         domNode.getEventListeners(eventListenersCallback.bind(this));
+    }
+
+    _refreshDataBindings()
+    {
+        if (!this._dataBindingsSection)
+            return;
+
+        let domNode = this.domNode;
+        if (!domNode)
+            return;
+
+        DOMAgent.getDataBindingsForNode(this.domNode.id).then(({dataBindings}) => {
+            if (this.domNode !== domNode)
+                return;
+
+            if (!dataBindings.length) {
+                let emptyRow = new WI.DetailsSectionRow(WI.UIString("No Data Bindings"));
+                emptyRow.showEmptyMessage();
+                this._dataBindingsSection.groups = [new WI.DetailsSectionGroup([emptyRow])];
+                return;
+            }
+
+            let groups = [];
+            for (let {binding, type, value} of dataBindings) {
+                groups.push(new WI.DetailsSectionGroup([
+                    new WI.DetailsSectionSimpleRow(WI.UIString("Binding"), binding),
+                    new WI.DetailsSectionSimpleRow(WI.UIString("Type"), type),
+                    new WI.DetailsSectionSimpleRow(WI.UIString("Value"), value),
+                ]));
+            }
+            this._dataBindingsSection.groups = groups;
+        });
+    }
+
+    _refreshAssociatedData()
+    {
+        if (!this._associatedDataGrid)
+            return;
+
+        const objectGroup = "dom-node-details-sidebar-associated-data-object-group";
+        RuntimeAgent.releaseObjectGroup(objectGroup);
+
+        let domNode = this.domNode;
+        if (!domNode)
+            return;
+
+        DOMAgent.getAssociatedDataForNode(domNode.id).then(({associatedData}) => {
+            if (this.domNode !== domNode)
+                return;
+
+            if (!associatedData) {
+                this._associatedDataGrid.showEmptyMessage();
+                return;
+            }
+
+            let expression = associatedData;
+            const options = {
+                objectGroup,
+                doNotPauseOnExceptionsAndMuteConsole: true,
+            };
+            WI.runtimeManager.evaluateInInspectedWindow(expression, options, (result, wasThrown) => {
+                console.assert(!wasThrown);
+
+                if (!result) {
+                    this._associatedDataGrid.showEmptyMessage();
+                    return;
+                }
+
+                this._associatedDataGrid.hideEmptyMessage();
+
+                const propertyPath = null;
+                const forceExpanding = true;
+                let element = WI.FormattedValue.createObjectTreeOrFormattedValueForRemoteObject(result, propertyPath, forceExpanding);
+
+                let objectTree = element.__objectTree;
+                if (objectTree) {
+                    objectTree.showOnlyProperties();
+                    objectTree.expand();
+                }
+
+                this._associatedDataGrid.element.appendChild(element);
+            });
+        });
     }
 
@@ -768 +871 @@
         this._refreshAttributes();
         this._refreshAccessibility();
+        this._refreshDataBindings();
     }
 
@@ -847 +951 @@
     Node: "node",
 };
-
-WI.DOMNodeDetailsSidebarPanel.PropertiesObjectGroupName = "dom-node-details-sidebar-properties-object-group";

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

@@ -52 +52 @@
 
         this._element = document.createElement("div");
+        this._element.__objectTree = this;
         this._element.className = "object-tree";