- Revision
- 242076
- Author
- [email protected]
- Date
- 2019-02-25 23:36:29 -0800 (Mon, 25 Feb 2019)
Log 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.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (242075 => 242076)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-02-26 06:44:06 UTC (rev 242075)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-02-26 07:36:29 UTC (rev 242076)
@@ -1,3 +1,36 @@
+2019-02-25 Devin Rousso <[email protected]>
+
+ 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.
+
2019-02-25 Joseph Pecoraro <[email protected]>
Web Inspector: CPU Usage Timeline - Thread Breakdown
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/ConsoleManager.js (242075 => 242076)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/ConsoleManager.js 2019-02-26 06:44:06 UTC (rev 242075)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/ConsoleManager.js 2019-02-26 07:36:29 UTC (rev 242076)
@@ -34,6 +34,7 @@
this._clearMessagesRequested = false;
this._isNewPageOrReload = false;
+ this._remoteObjectsToRelease = null;
WI.Frame.addEventListener(WI.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
@@ -77,6 +78,13 @@
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,12 @@
{
// Called from WI.ConsoleObserver.
+ if (this._remoteObjectsToRelease) {
+ for (let remoteObject of this._remoteObjectsToRelease)
+ remoteObject.release();
+ this._remoteObjectsToRelease = null;
+ }
+
WI.ConsoleCommandResultMessage.clearMaximumSavedResultIndex();
if (this._clearMessagesRequested) {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js (242075 => 242076)
--- trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js 2019-02-26 06:44:06 UTC (rev 242075)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js 2019-02-26 07:36:29 UTC (rev 242076)
@@ -114,12 +114,44 @@
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 @@
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 @@
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);
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js (242075 => 242076)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js 2019-02-26 06:44:06 UTC (rev 242075)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js 2019-02-26 07:36:29 UTC (rev 242076)
@@ -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 @@
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 @@
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 @@
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 @@
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 @@
_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;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js (242075 => 242076)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js 2019-02-26 06:44:06 UTC (rev 242075)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js 2019-02-26 07:36:29 UTC (rev 242076)
@@ -157,7 +157,7 @@
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();
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js (242075 => 242076)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js 2019-02-26 06:44:06 UTC (rev 242075)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js 2019-02-26 07:36:29 UTC (rev 242076)
@@ -54,7 +54,7 @@
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);
