Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1257)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: Source/devtools/front_end/components/ObjectPropertiesSection.js

Issue 905743003: DevTools: Reimplemented WI.WatchExpressionsSidebarPane (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 5 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | Source/devtools/front_end/sources/WatchExpressionsSidebarPane.js » ('j') | Source/devtools/front_end/sources/WatchExpressionsSidebarPane.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: Source/devtools/front_end/components/ObjectPropertiesSection.js
diff --git a/Source/devtools/front_end/components/ObjectPropertiesSection.js b/Source/devtools/front_end/components/ObjectPropertiesSection.js
index 5ad51126a336150be71066f4e919f937dbc281c7..11408d6e7f8cac4881a66728e4662ccd837eca4d 100644
--- a/Source/devtools/front_end/components/ObjectPropertiesSection.js
+++ b/Source/devtools/front_end/components/ObjectPropertiesSection.js
@@ -167,7 +167,7 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
*/
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;
@@ -183,12 +183,7 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
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())
@@ -196,105 +191,31 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
if (this.property.symbol)
this.nameElement.addEventListener("contextmenu", this._contextMenuFired.bind(this, this.property.symbol), false);
- 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));
+ 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.
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 (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();
+ if (this.property.value)
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");
- }
- }
+ var separatorElement = createElementWithClass("span", "separator");
+ separatorElement.textContent = ": ";
+ 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)
@@ -304,59 +225,38 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
},
/**
- * @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);
},
@@ -400,7 +300,7 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
{
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
@@ -1127,3 +1027,99 @@ WebInspector.ObjectPropertyPrompt = function(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;
+}
« no previous file with comments | « no previous file | Source/devtools/front_end/sources/WatchExpressionsSidebarPane.js » ('j') | Source/devtools/front_end/sources/WatchExpressionsSidebarPane.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698