Attachment 362545 Details for Bug 194862 – [Patch] WIP

[patch] [Patch] WIP

bug-194862-20190220144755.patch (text/plain), 12.77 KB, created by Devin Rousso on 2019-02-20 14:47:56 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2019-02-20 14:47:56 PST

Size: 12.77 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 276a49be0d138579541bc14fdf2d81804fb5c01b..32e5a202487f08927cf68f632d737cf5f46f2510 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,36 @@
>+2019-02-20  Devin Rousso  <drousso@apple.com>
>+
>+        Web Inspector: hovering a node inside an object preview should highlight it
>+        https://bugs.webkit.org/show_bug.cgi?id=194862
>+        <rdar://problem/48246433>
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * UserInterface/Views/FormattedValue.js:
>+        (WI.FormattedValue.createElementForNodePreview):
>+        When provided a way to access the `WI.RemoteObject` for the given preview, add various mouse
>+        event listeners that highlight the corresponding DOM node.
>+
>+        * UserInterface/Views/ObjectPreviewView.js:
>+        (WI.ObjectPreviewView):
>+        (WI.ObjectPreviewView.prototype._initTitleElement):
>+        (WI.ObjectPreviewView.prototype._appendPropertyPreviews):
>+        (WI.ObjectPreviewView.prototype._appendValuePreview):
>+        Implement various ways of getting the `WI.RemoteObject` for a given preview.
>+         - When the preview is for the actual `WI.RemoteObject`, simply return it
>+         - If the preview is a property of the main object, get the `WI.RemoteObject` for that property
>+
>+        * UserInterface/Views/ObjectTreeView.js:
>+        (WI.ObjectTreeView):
>+        * UserInterface/Views/ObjectTreePropertyTreeElement.js:
>+        (WI.ObjectTreePropertyTreeElement.prototype._createTitlePropertyStyle):
>+        Pass the `WI.RemoteObject` to the preview so that it can utilize it.
>+
>+        * UserInterface/Controllers/ConsoleManager.js:
>+        (WI.ConsoleManager):
>+        (WI.ConsoleManager.prototype.releaseRemoteObjectWithConsoleClear): Added.
>+        (WI.ConsoleManager.prototype.messagesCleared): Added.
>+
> 2019-02-19  Joseph Pecoraro  <pecoraro@apple.com>
> 
>         Web Inspector: Improve ES6 Class instances in Heap Snapshot instances view
>diff --git a/Source/WebInspectorUI/UserInterface/Controllers/ConsoleManager.js b/Source/WebInspectorUI/UserInterface/Controllers/ConsoleManager.js
>index 605702177e2267eba7e3fa0653b737064b876651..0bd5364a26fcdb5d74ff254e8386c91659dd5161 100644
>--- a/Source/WebInspectorUI/UserInterface/Controllers/ConsoleManager.js
>+++ b/Source/WebInspectorUI/UserInterface/Controllers/ConsoleManager.js
>@@ -34,6 +34,7 @@ WI.ConsoleManager = class ConsoleManager extends WI.Object
> 
>         this._clearMessagesRequested = false;
>         this._isNewPageOrReload = false;
>+        this._remoteObjectsToRelease = null;
> 
>         WI.Frame.addEventListener(WI.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
> 
>@@ -77,6 +78,13 @@ WI.ConsoleManager = class ConsoleManager extends WI.Object
>         return issues;
>     }
> 
>+    releaseRemoteObjectWithConsoleClear(remoteObject)
>+    {
>+        if (!this._remoteObjectsToRelease)
>+            this._remoteObjectsToRelease = new Set;
>+        this._remoteObjectsToRelease.add(remoteObject);
>+    }
>+
>     messageWasAdded(target, source, level, text, type, url, line, column, repeatCount, parameters, stackTrace, requestId)
>     {
>         // Called from WI.ConsoleObserver.
>@@ -102,6 +110,10 @@ WI.ConsoleManager = class ConsoleManager extends WI.Object
>     {
>         // Called from WI.ConsoleObserver.
> 
>+        for (let remoteObject of this._remoteObjectsToRelease)
>+            remoteObject.release();
>+        this._remoteObjectsToRelease = null;
>+
>         WI.ConsoleCommandResultMessage.clearMaximumSavedResultIndex();
> 
>         if (this._clearMessagesRequested) {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js
>index d3eec95bd8add6865f50f08df936cc93122a39fe..07233853d5d059a89b559d21ea8b4cab9e07e394 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js
>@@ -114,12 +114,44 @@ WI.FormattedValue.createElementForError = function(object)
>     return span;
> };
> 
>-WI.FormattedValue.createElementForNodePreview = function(preview)
>+WI.FormattedValue.createElementForNodePreview = function(preview, {remoteObjectAccessor} = {})
> {
>     var value = preview.value || preview.description;
>     var span = document.createElement("span");
>     span.className = "formatted-node-preview syntax-highlighted";
> 
>+    if (remoteObjectAccessor) {
>+        let domNode = null;
>+
>+        span.addEventListener("mouseenter", (event) => {
>+            if (domNode) {
>+                WI.domManager.highlightDOMNode(domNode.id, "all");
>+                return;
>+            }
>+
>+            remoteObjectAccessor((remoteObject) => {
>+                remoteObject.pushNodeToFrontend((nodeId) => {
>+                    domNode = WI.domManager.nodeForId(nodeId);
>+                    if (domNode)
>+                        WI.domManager.highlightDOMNode(domNode.id, "all");
>+                });
>+            });
>+        });
>+
>+        span.addEventListener("mouseleave", (event) => {
>+            WI.domManager.hideDOMNodeHighlight();
>+        });
>+
>+        span.addEventListener("contextmenu", (event) => {
>+            if (!domNode)
>+                return;
>+
>+            let contextMenu = WI.ContextMenu.createFromEvent(event);
>+
>+            WI.appendContextMenuItemsForDOMNode(contextMenu, domNode);
>+        });
>+    }
>+
>     // Comment node preview.
>     if (value.startsWith("<!--")) {
>         var comment = span.appendChild(document.createElement("span"));
>@@ -246,7 +278,8 @@ WI.FormattedValue.createObjectPreviewOrFormattedValueForObjectPreview = function
>     if (objectPreview.type === "function")
>         return WI.FormattedValue.createElementForFunctionWithName(objectPreview.description);
> 
>-    return new WI.ObjectPreviewView(objectPreview, previewViewMode).element;
>+    const object = null;
>+    return new WI.ObjectPreviewView(object, objectPreview, previewViewMode).element;
> };
> 
> WI.FormattedValue.createObjectPreviewOrFormattedValueForRemoteObject = function(object, previewViewMode)
>@@ -258,7 +291,7 @@ WI.FormattedValue.createObjectPreviewOrFormattedValueForRemoteObject = function(
>         return WI.FormattedValue.createElementForError(object);
> 
>     if (object.preview)
>-        return new WI.ObjectPreviewView(object.preview, previewViewMode);
>+        return new WI.ObjectPreviewView(object, object.preview, previewViewMode);
> 
>     return WI.FormattedValue.createElementForRemoteObject(object);
> };
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js b/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js
>index b589e7468e01b314dc0ddd7948ce6c30447389b4..48ff08c63856d2a989be6559467997c6c90e217b 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js
>@@ -25,12 +25,14 @@
> 
> WI.ObjectPreviewView = class ObjectPreviewView extends WI.Object
> {
>-    constructor(preview, mode)
>+    constructor(object, preview, mode)
>     {
>+        console.assert(!object || object instanceof WI.RemoteObject);
>         console.assert(preview instanceof WI.ObjectPreview);
> 
>         super();
> 
>+        this._object = object || null;
>         this._preview = preview;
>         this._mode = mode || WI.ObjectPreviewView.Mode.Full;
> 
>@@ -110,7 +112,7 @@ WI.ObjectPreviewView = class ObjectPreviewView extends WI.Object
>         if (this._preview.subtype === "regexp" || this._preview.subtype === "null")
>             this._titleElement.appendChild(WI.FormattedValue.createElementForObjectPreview(this._preview));
>         else if (this._preview.subtype === "node")
>-            this._titleElement.appendChild(WI.FormattedValue.createElementForNodePreview(this._preview));
>+            this._titleElement.appendChild(WI.FormattedValue.createElementForNodePreview(this._preview, {remoteObjectAccessor: (callback) => callback(this._object)}));
>         else
>             this._titleElement.textContent = this._preview.description || "";
>     }
>@@ -210,8 +212,8 @@ WI.ObjectPreviewView = class ObjectPreviewView extends WI.Object
> 
>         var numberAdded = 0;
>         var limit = this._numberOfPropertiesToShowInMode();
>-        for (var i = 0; i < preview.propertyPreviews.length && numberAdded < limit; ++i) {
>-            var property = preview.propertyPreviews[i];
>+        for (let i = 0; i < preview.propertyPreviews.length && numberAdded < limit; ++i) {
>+            let property = preview.propertyPreviews[i];
> 
>             // FIXME: Better handle getter/setter accessors. Should we show getters in previews?
>             if (property.type === "accessor")
>@@ -225,7 +227,7 @@ WI.ObjectPreviewView = class ObjectPreviewView extends WI.Object
>                 element.append(", ");
> 
>             if (!isArray || property.name != i) {
>-                var nameElement = element.appendChild(document.createElement("span"));
>+                let nameElement = element.appendChild(document.createElement("span"));
>                 nameElement.className = "name";
>                 nameElement.textContent = property.name;
>                 element.append(": ");
>@@ -233,9 +235,20 @@ WI.ObjectPreviewView = class ObjectPreviewView extends WI.Object
> 
>             if (property.valuePreview)
>                 this._appendPreview(element, property.valuePreview);
>-            else if (property.subtype === "node")
>-                element.appendChild(WI.FormattedValue.createElementForNodePreview(property));
>-            else
>+            else if (property.subtype === "node") {
>+                let options = {};
>+                if (preview === this._preview && this._object) {
>+                    options.remoteObjectAccessor = (callback) => {
>+                        this._object.getProperty(property.name, (error, remoteObject, wasThrown) => {
>+                            if (!error && remoteObject && !wasThrown) {
>+                                WI.consoleManager.releaseRemoteObjectWithConsoleClear(remoteObject);
>+                                callback(remoteObject);
>+                            }
>+                        });
>+                    };
>+                }
>+                element.appendChild(WI.FormattedValue.createElementForNodePreview(property, options));
>+            } else
>                 element.appendChild(WI.FormattedValue.createElementForPropertyPreview(property));
>         }
> 
>@@ -258,7 +271,10 @@ WI.ObjectPreviewView = class ObjectPreviewView extends WI.Object
>     _appendValuePreview(element, preview)
>     {
>         if (preview.subtype === "node") {
>-            element.appendChild(WI.FormattedValue.createElementForNodePreview(preview));
>+            let options = {};
>+            if (preview === this._preview && this._object)
>+                options.remoteObjectAccessor = (callback) => callback(this._object);
>+            element.appendChild(WI.FormattedValue.createElementForNodePreview(preview, options));
>             return false;
>         }
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js
>index 85d6556a57e46b958c8a62665b784722cff7309c..fa443bd52ff5215fcd7f937ce03335c0b1da4e2e 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js
>@@ -157,7 +157,7 @@ WI.ObjectTreePropertyTreeElement = class ObjectTreePropertyTreeElement extends W
>         var resolvedValue = this.resolvedValue();
>         if (resolvedValue) {
>             if (resolvedValue.preview) {
>-                this._previewView = new WI.ObjectPreviewView(resolvedValue.preview);
>+                this._previewView = new WI.ObjectPreviewView(resolvedValue, resolvedValue.preview);
>                 valueOrGetterElement = this._previewView.element;
>             } else {
>                 this._loadPreviewLazilyIfNeeded();
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js
>index 55743aa4cf78c3d95f961f99c236ea07f5cb7e5c..433d041803e13f09eb7d7e70b2bf7c81fcc37b33 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js
>@@ -54,7 +54,7 @@ WI.ObjectTreeView = class ObjectTreeView extends WI.Object
>         this._element.className = "object-tree";
> 
>         if (this._object.preview) {
>-            this._previewView = new WI.ObjectPreviewView(this._object.preview);
>+            this._previewView = new WI.ObjectPreviewView(this._object, this._object.preview);
>             this._previewView.setOriginatingObjectInfo(this._object, providedPropertyPath ? propertyPath : null);
>             this._previewView.element.addEventListener("click", this._handlePreviewOrTitleElementClick.bind(this));
>             this._element.appendChild(this._previewView.element);

Actions: View | Formatted Diff | Diff

Attachments on bug 194862: 362523 | 362545 | 362553 | 362555