DevTools: Reimplemented WI.WatchExpressionsSidebarPane

Source/devtools/front_end/components/ObjectPropertiesSection.js

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
@@ skipping 149 matching lines @@
         console.assert(propertyValue);
         WebInspector.ObjectPropertyTreeElement.populate(this, propertyValue);
     },
 
     /**
      * @override
      * @return {boolean}
      */
     ondblclick: function(event)
     {
-        var editableElement = this.elementAndValueToEdit().element;
+        var editableElement = this.valueElement;
         if ((this.property.writable || this.property.setter) && event.target.isSelfOrDescendant(editableElement))
             this.startEditing(event);
         return false;
     },
 
     /**
      * @override
      */
     onattach: function()
     {
         this.update();
     },
 
     update: function()
     {
-        this.nameElement = createElementWithClass("span", "name");
-        var name = this.property.name;
-        if (/^\s|\s$|^$|\n/.test(name))
-            this.nameElement.createTextChildren("\"", name.replace(/\n/g, "\u21B5"), "\"");
-        else
-            this.nameElement.textContent = name;
+        this.nameElement = WebInspector.ObjectPropertiesSection.createNameElement(this.property.name);
         if (!this.property.enumerable)
             this.nameElement.classList.add("dimmed");
         if (this.property.isAccessorProperty())
             this.nameElement.classList.add("properties-accessor-property-name");
         if (this.property.symbol)
             this.nameElement.addEventListener("contextmenu", this._contextMenuFired.bind(this, this.property.symbol), false);
 
+        if (!this.property.value && this.property.getter)

[pfeldman, 2015/02/09 13:13:52]

I don't see how the old code maps to the new code. Please extract this into a
separate change.

[sergeyv, 2015/02/17 14:22:58]

Done.

+            this.valueElement = WebInspector.ObjectPropertyTreeElement.createRemoteObjectAccessorPropertySpan(this.property.parentObject, [this.property.name], this._onInvokeGetterClick.bind(this));
+        else
+            this.valueElement = WebInspector.ObjectPropertiesSection.createValueElement(this.property.value, this.property.wasThrown, this.listItemElement);
+
+        if (this.property.value)
+            this.valueElement.addEventListener("contextmenu", this._contextMenuFired.bind(this, this.property.value), false);
+
+
+        if (this.property.value)
+            this.hasChildren = this.property.value.hasChildren && !this.property.wasThrown;
         var separatorElement = createElementWithClass("span", "separator");
         separatorElement.textContent = ": ";
 
-        if (this.property.value) {
-            this.valueElement = createElementWithClass("span", "value");
-            var type = this.property.value.type;
-            var subtype = this.property.value.subtype;
-            var description = this.property.value.description;
-            var prefix;
-            var valueText;
-            var suffix;
-            if (this.property.wasThrown) {
-                prefix = "[Exception: ";
-                valueText = description;
-                suffix = "]";
-            } else if (type === "string" && typeof description === "string") {
-                // Render \n as a nice unicode cr symbol.
-                prefix = "\"";
-                valueText = description.replace(/\n/g, "\u21B5");
-                suffix = "\"";
-                this.valueElement._originalTextContent = "\"" + description + "\"";
-            } else if (type === "function" && typeof description === "string") {
-                // Render function description until the first \n.
-                valueText = /.*/.exec(description)[0].replace(/\s+$/g, "");
-                this.valueElement._originalTextContent = description;
-            } else if (type !== "object" || subtype !== "node") {
-                valueText = description;
-            }
-            if (type !== "number" || valueText.indexOf("e") === -1) {
-                this.valueElement.setTextContentTruncatedIfNeeded(valueText || "");
-                if (prefix)
-                    this.valueElement.insertBefore(createTextNode(prefix), this.valueElement.firstChild);
-                if (suffix)
-                    this.valueElement.createTextChild(suffix);
-            } else {
-                var numberParts = valueText.split("e");
-                var mantissa = this.valueElement.createChild("span", "scientific-notation-mantissa");
-                mantissa.textContent = numberParts[0];
-                var exponent = this.valueElement.createChild("span", "scientific-notation-exponent");
-                exponent.textContent = "e" + numberParts[1];
-                this.valueElement.classList.add("scientific-notation-number");
-                this.listItemElement.classList.add("hbox");
-            }
-
-            if (this.property.wasThrown)
-                this.valueElement.classList.add("error");
-            if (subtype || type)
-                this.valueElement.classList.add("console-formatted-" + (subtype || type));
-
-            this.valueElement.addEventListener("contextmenu", this._contextMenuFired.bind(this, this.property.value), false);
-            if (type === "object" && subtype === "node" && description) {
-                WebInspector.DOMPresentationUtils.createSpansForNodeTitle(this.valueElement, description);
-                this.valueElement.addEventListener("mousemove", this._mouseMove.bind(this), false);
-                this.valueElement.addEventListener("mouseleave", this._mouseLeave.bind(this), false);
-            } else {
-                this.valueElement.title = description || "";
-            }
-
-            this.listItemElement.removeChildren();
-
-            this.hasChildren = this.property.value.hasChildren && !this.property.wasThrown;
-        } else {
-            if (this.property.getter) {
-                this.valueElement = WebInspector.ObjectPropertyTreeElement.createRemoteObjectAccessorPropertySpan(this.property.parentObject, [this.property.name], this._onInvokeGetterClick.bind(this));
-            } else {
-                this.valueElement = createElementWithClass("span", "console-formatted-undefined");
-                this.valueElement.textContent = WebInspector.UIString("<unreadable>");
-                this.valueElement.title = WebInspector.UIString("No property getter");
-            }
-        }
-
+        this.listItemElement.removeChildren();
         this.listItemElement.appendChildren(this.nameElement, separatorElement, this.valueElement);
     },
 
     _contextMenuFired: function(value, event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
-        this.populateContextMenu(contextMenu);
         contextMenu.appendApplicableItems(value);
         contextMenu.show();
     },
 
-    /**
-     * @param {!WebInspector.ContextMenu} contextMenu
-     */
-    populateContextMenu: function(contextMenu)
-    {
-    },
-
-    _mouseMove: function(event)
-    {
-        this.property.value.highlightAsDOMNode();
-    },
-
-    _mouseLeave: function(event)
-    {
-        this.property.value.hideDOMNodeHighlight();
-    },
-
     updateSiblings: function()
     {
         if (this.parent.root)
             this.treeOutline.section.update();
         else
             this.parent.shouldRefreshChildren = true;
     },
 
     /**
-     * @return {boolean}
-     */
-    renderPromptAsBlock: function()
-    {
-        return false;
-    },
-
-    /**
-     * @return {{element: !Element, value: (string|undefined)}}
-     */
-    elementAndValueToEdit: function()
-    {
-        return {
-            element: this.valueElement,
-            value: (typeof this.valueElement._originalTextContent === "string") ? this.valueElement._originalTextContent : undefined
-        };
-    },
-
-    /**
      * @param {!Event=} event
      */
     startEditing: function(event)
     {
-        var elementAndValueToEdit = this.elementAndValueToEdit();
-        var elementToEdit = elementAndValueToEdit.element;
-        var valueToEdit = elementAndValueToEdit.value;
+        var valueToEdit = (typeof this.valueElement._originalTextContent === "string") ? this.valueElement._originalTextContent : undefined;
 
-        if (WebInspector.isBeingEdited(elementToEdit) || !this.treeOutline.section.editable || this._readOnly)
+        if (WebInspector.isBeingEdited(this.valueElement) || !this.treeOutline.section.editable || this._readOnly)
             return;
 
         // Edit original source.
         if (typeof valueToEdit !== "undefined")
-            elementToEdit.setTextContentTruncatedIfNeeded(valueToEdit, WebInspector.UIString("<string is too large to edit>"));
+            this.valueElement.setTextContentTruncatedIfNeeded(valueToEdit, WebInspector.UIString("<string is too large to edit>"));
 
-        var context = { expanded: this.expanded, elementToEdit: elementToEdit, previousContent: elementToEdit.textContent };
+        var context = { expanded: this.expanded, previousContent: this.valueElement.textContent };
 
         // Lie about our children to prevent expanding on double click and to collapse subproperties.
         this.hasChildren = false;
 
         this.listItemElement.classList.add("editing-sub-part");
 
-        this._prompt = new WebInspector.ObjectPropertyPrompt(this.renderPromptAsBlock());
+        this._prompt = new WebInspector.ObjectPropertyPrompt(false);
 
         /**
          * @this {WebInspector.ObjectPropertyTreeElement}
          */
         function blurListener()
         {
-            this.editingCommitted(null, elementToEdit.textContent, context.previousContent, context);
+            this.editingCommitted(null, this.valueElement.textContent, context.previousContent, context);
         }
 
-        var proxyElement = this._prompt.attachAndStartEditing(elementToEdit, blurListener.bind(this));
-        this.listItemElement.getComponentSelection().setBaseAndExtent(elementToEdit, 0, elementToEdit, 1);
+        var proxyElement = this._prompt.attachAndStartEditing(this.valueElement, blurListener.bind(this));
+        this.listItemElement.getComponentSelection().setBaseAndExtent(this.valueElement, 0, this.valueElement, 1);
         proxyElement.addEventListener("keydown", this._promptKeyDown.bind(this, context), false);
     },
 
     /**
      * @return {boolean}
      */
     isEditing: function()
     {
         return !!this._prompt;
     },
@@ skipping 23 matching lines @@
         }
 
         this.editingEnded(context);
         this.applyExpression(userInput);
     },
 
     _promptKeyDown: function(context, event)
     {
         if (isEnterKey(event)) {
             event.consume(true);
-            this.editingCommitted(null, context.elementToEdit.textContent, context.previousContent, context);
+            this.editingCommitted(null, this.valueElement.textContent, context.previousContent, context);
             return;
         }
         if (event.keyIdentifier === "U+001B") { // Esc
             event.consume();
             this.editingCancelled(null, context);
             return;
         }
     },
 
     /**
@@ skipping 706 matching lines @@
 {
     WebInspector.TextPrompt.call(this, WebInspector.ExecutionContextSelector.completionsForTextPromptInCurrentContext);
     this.setSuggestBoxEnabled(true);
     if (renderAsBlock)
         this.renderAsBlock();
 }
 
 WebInspector.ObjectPropertyPrompt.prototype = {
     __proto__: WebInspector.TextPrompt.prototype
 }
+
+/**
+ * @param {?string} name
+ * @return {!Element}
+ */
+WebInspector.ObjectPropertiesSection.createNameElement = function(name)
+{
+    var nameElement = createElementWithClass("span", "name");
+    if (/^\s|\s$|^$|\n/.test(name))
+        nameElement.createTextChildren("\"", name.replace(/\n/g, "\u21B5"), "\"");

[pfeldman, 2015/02/09 13:13:52]

What is happening here?

+    else
+        nameElement.textContent = name;
+    return nameElement;
+}
+
+
+/**
+ * @param {?WebInspector.RemoteObject} value
+ * @param {boolean} wasThrown
+ * @param {!Element} parentElement
+ * @return {!Element}
+ */
+WebInspector.ObjectPropertiesSection.createValueElement = function(value, wasThrown, parentElement)
+{
+    var valueElement;
+    if (value) {
+        valueElement = createElementWithClass("span", "value");
+        var type = value.type;
+        var subtype = value.subtype;
+        var description = value.description;
+        var prefix;
+        var valueText;
+        var suffix;
+        if (wasThrown) {
+            prefix = "[Exception: ";
+            valueText = description;
+            suffix = "]";
+        } else if (type === "string" && typeof description === "string") {
+            // Render \n as a nice unicode cr symbol.
+            prefix = "\"";
+            valueText = description.replace(/\n/g, "\u21B5");
+            suffix = "\"";
+            valueElement._originalTextContent = "\"" + description + "\"";
+        } else if (type === "function" && typeof description === "string") {
+            // Render function description until the first \n.
+            valueText = /.*/.exec(description)[0].replace(/\s+$/g, "");
+            valueElement._originalTextContent = description;
+        } else if (type !== "object" || subtype !== "node") {
+            valueText = description;
+        }
+        if (type !== "number" || valueText.indexOf("e") === -1) {
+            valueElement.setTextContentTruncatedIfNeeded(valueText || "");
+            if (prefix)
+                valueElement.insertBefore(createTextNode(prefix), valueElement.firstChild);
+            if (suffix)
+                valueElement.createTextChild(suffix);
+        } else {
+            var numberParts = valueText.split("e");
+            var mantissa = valueElement.createChild("span", "scientific-notation-mantissa");
+            mantissa.textContent = numberParts[0];
+            var exponent = valueElement.createChild("span", "scientific-notation-exponent");
+            exponent.textContent = "e" + numberParts[1];
+            valueElement.classList.add("scientific-notation-number");
+            parentElement.classList.add("hbox");
+        }
+
+        if (wasThrown)
+            valueElement.classList.add("error");
+        if (subtype || type)
+            valueElement.classList.add("console-formatted-" + (subtype || type));
+
+        if (type === "object" && subtype === "node" && description) {
+            WebInspector.DOMPresentationUtils.createSpansForNodeTitle(valueElement, description);
+            valueElement.addEventListener("mousemove", mouseMove, false);
+            valueElement.addEventListener("mouseleave", mouseLeave, false);
+        } else {
+            valueElement.title = description || "";
+        }
+    } else {
+        valueElement = createElementWithClass("span", "console-formatted-undefined");
+        valueElement.textContent = WebInspector.UIString("<unreadable>");
+        valueElement.title = WebInspector.UIString("No property getter");
+    }
+
+    function mouseMove()
+    {
+        value.highlightAsDOMNode();
+    }
+
+    function mouseLeave()
+    {
+        value.hideDOMNodeHighlight();
+    }
+
+    return valueElement;
+}