Changeset 242076 in webkit


Ignore:
Timestamp:
Feb 25, 2019 11:36:29 PM (5 years ago)
Author:
Devin Rousso
Message:

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 Joseph Pecoraro.

  • 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.

Location:
trunk/Source/WebInspectorUI
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r242073 r242076  
     12019-02-25  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: hovering a node inside an object preview should highlight it
     4        https://bugs.webkit.org/show_bug.cgi?id=194862
     5        <rdar://problem/48246433>
     6
     7        Reviewed by Joseph Pecoraro.
     8
     9        * UserInterface/Views/FormattedValue.js:
     10        (WI.FormattedValue.createElementForNodePreview):
     11        When provided a way to access the `WI.RemoteObject` for the given preview, add various mouse
     12        event listeners that highlight the corresponding DOM node.
     13
     14        * UserInterface/Views/ObjectPreviewView.js:
     15        (WI.ObjectPreviewView):
     16        (WI.ObjectPreviewView.prototype._initTitleElement):
     17        (WI.ObjectPreviewView.prototype._appendPropertyPreviews):
     18        (WI.ObjectPreviewView.prototype._appendValuePreview):
     19        Implement various ways of getting the `WI.RemoteObject` for a given preview.
     20         - When the preview is for the actual `WI.RemoteObject`, simply return it
     21         - If the preview is a property of the main object, get the `WI.RemoteObject` for that property
     22
     23        * UserInterface/Views/ObjectTreeView.js:
     24        (WI.ObjectTreeView):
     25        * UserInterface/Views/ObjectTreePropertyTreeElement.js:
     26        (WI.ObjectTreePropertyTreeElement.prototype._createTitlePropertyStyle):
     27        Pass the `WI.RemoteObject` to the preview so that it can utilize it.
     28
     29        * UserInterface/Controllers/ConsoleManager.js:
     30        (WI.ConsoleManager):
     31        (WI.ConsoleManager.prototype.releaseRemoteObjectWithConsoleClear): Added.
     32        (WI.ConsoleManager.prototype.messagesCleared): Added.
     33
    1342019-02-25  Joseph Pecoraro  <pecoraro@apple.com>
    235

  • trunk/Source/WebInspectorUI/UserInterface/Controllers/ConsoleManager.js

    r241744 r242076  
    3535        this._clearMessagesRequested = false;
    3636        this._isNewPageOrReload = false;
     37        this._remoteObjectsToRelease = null;
    3738
    3839        WI.Frame.addEventListener(WI.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
    … …  
    7879    }
    7980
     81    releaseRemoteObjectWithConsoleClear(remoteObject)
     82    {
     83        if (!this._remoteObjectsToRelease)
     84            this._remoteObjectsToRelease = new Set;
     85        this._remoteObjectsToRelease.add(remoteObject);
     86    }
     87
    8088    messageWasAdded(target, source, level, text, type, url, line, column, repeatCount, parameters, stackTrace, requestId)
    8189    {
    … …  
    102110    {
    103111        // Called from WI.ConsoleObserver.
     112
     113        if (this._remoteObjectsToRelease) {
     114            for (let remoteObject of this._remoteObjectsToRelease)
     115                remoteObject.release();
     116            this._remoteObjectsToRelease = null;
     117        }
    104118
    105119        WI.ConsoleCommandResultMessage.clearMaximumSavedResultIndex();

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

    r236766 r242076  
    115115};
    116116
    117 WI.FormattedValue.createElementForNodePreview = function(preview)
     117WI.FormattedValue.createElementForNodePreview = function(preview, {remoteObjectAccessor} = {})
    118118{
    119119    var value = preview.value || preview.description;
    120120    var span = document.createElement("span");
    121121    span.className = "formatted-node-preview syntax-highlighted";
     122
     123    if (remoteObjectAccessor) {
     124        let domNode = null;
     125
     126        span.addEventListener("mouseenter", (event) => {
     127            if (domNode) {
     128                WI.domManager.highlightDOMNode(domNode.id, "all");
     129                return;
     130            }
     131
     132            remoteObjectAccessor((remoteObject) => {
     133                remoteObject.pushNodeToFrontend((nodeId) => {
     134                    domNode = WI.domManager.nodeForId(nodeId);
     135                    if (domNode)
     136                        WI.domManager.highlightDOMNode(domNode.id, "all");
     137                });
     138            });
     139        });
     140
     141        span.addEventListener("mouseleave", (event) => {
     142            WI.domManager.hideDOMNodeHighlight();
     143        });
     144
     145        span.addEventListener("contextmenu", (event) => {
     146            if (!domNode)
     147                return;
     148
     149            let contextMenu = WI.ContextMenu.createFromEvent(event);
     150
     151            WI.appendContextMenuItemsForDOMNode(contextMenu, domNode);
     152        });
     153    }
    122154
    123155    // Comment node preview.
    … …  
    247279        return WI.FormattedValue.createElementForFunctionWithName(objectPreview.description);
    248280
    249     return new WI.ObjectPreviewView(objectPreview, previewViewMode).element;
     281    const object = null;
     282    return new WI.ObjectPreviewView(object, objectPreview, previewViewMode).element;
    250283};
    251284
    … …  
    259292
    260293    if (object.preview)
    261         return new WI.ObjectPreviewView(object.preview, previewViewMode);
     294        return new WI.ObjectPreviewView(object, object.preview, previewViewMode);
    262295
    263296    return WI.FormattedValue.createElementForRemoteObject(object);

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

    r238743 r242076  
    2626WI.ObjectPreviewView = class ObjectPreviewView extends WI.Object
    2727{
    28     constructor(preview, mode)
    29     {
     28    constructor(object, preview, mode)
     29    {
     30        console.assert(!object || object instanceof WI.RemoteObject);
    3031        console.assert(preview instanceof WI.ObjectPreview);
    3132
    3233        super();
    3334
     35        this._object = object || null;
    3436        this._preview = preview;
    3537        this._mode = mode || WI.ObjectPreviewView.Mode.Full;
    … …  
    111113            this._titleElement.appendChild(WI.FormattedValue.createElementForObjectPreview(this._preview));
    112114        else if (this._preview.subtype === "node")
    113             this._titleElement.appendChild(WI.FormattedValue.createElementForNodePreview(this._preview));
     115            this._titleElement.appendChild(WI.FormattedValue.createElementForNodePreview(this._preview, {remoteObjectAccessor: (callback) => callback(this._object)}));
    114116        else
    115117            this._titleElement.textContent = this._preview.description || "";
    … …  
    211213        var numberAdded = 0;
    212214        var limit = this._numberOfPropertiesToShowInMode();
    213         for (var i = 0; i < preview.propertyPreviews.length && numberAdded < limit; ++i) {
    214             var property = preview.propertyPreviews[i];
     215        for (let i = 0; i < preview.propertyPreviews.length && numberAdded < limit; ++i) {
     216            let property = preview.propertyPreviews[i];
    215217
    216218            // FIXME: Better handle getter/setter accessors. Should we show getters in previews?
    … …  
    226228
    227229            if (!isArray || property.name != i) {
    228                 var nameElement = element.appendChild(document.createElement("span"));
     230                let nameElement = element.appendChild(document.createElement("span"));
    229231                nameElement.className = "name";
    230232                nameElement.textContent = property.name;
    … …  
    234236            if (property.valuePreview)
    235237                this._appendPreview(element, property.valuePreview);
    236             else if (property.subtype === "node")
    237                 element.appendChild(WI.FormattedValue.createElementForNodePreview(property));
    238             else
     238            else if (property.subtype === "node") {
     239                let options = {};
     240                if (preview === this._preview && this._object) {
     241                    options.remoteObjectAccessor = (callback) => {
     242                        this._object.getProperty(property.name, (error, remoteObject, wasThrown) => {
     243                            if (!error && remoteObject && !wasThrown) {
     244                                WI.consoleManager.releaseRemoteObjectWithConsoleClear(remoteObject);
     245                                callback(remoteObject);
     246                            }
     247                        });
     248                    };
     249                }
     250                element.appendChild(WI.FormattedValue.createElementForNodePreview(property, options));
     251            } else
    239252                element.appendChild(WI.FormattedValue.createElementForPropertyPreview(property));
    240253        }
    … …  
    259272    {
    260273        if (preview.subtype === "node") {
    261             element.appendChild(WI.FormattedValue.createElementForNodePreview(preview));
     274            let options = {};
     275            if (preview === this._preview && this._object)
     276                options.remoteObjectAccessor = (callback) => callback(this._object);
     277            element.appendChild(WI.FormattedValue.createElementForNodePreview(preview, options));
    262278            return false;
    263279        }

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

    r237571 r242076  
    158158        if (resolvedValue) {
    159159            if (resolvedValue.preview) {
    160                 this._previewView = new WI.ObjectPreviewView(resolvedValue.preview);
     160                this._previewView = new WI.ObjectPreviewView(resolvedValue, resolvedValue.preview);
    161161                valueOrGetterElement = this._previewView.element;
    162162            } else {

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

    r237571 r242076  
    5555
    5656        if (this._object.preview) {
    57             this._previewView = new WI.ObjectPreviewView(this._object.preview);
     57            this._previewView = new WI.ObjectPreviewView(this._object, this._object.preview);
    5858            this._previewView.setOriginatingObjectInfo(this._object, providedPropertyPath ? propertyPath : null);
    5959            this._previewView.element.addEventListener("click", this._handlePreviewOrTitleElementClick.bind(this));
Note: See TracChangeset for help on using the changeset viewer.