ObjectPropertiesSection.js [plain text]
WebInspector.ObjectPropertiesSection = function(object, title, subtitle, emptyPlaceholder, ignoreHasOwnProperty, extraProperties, treeElementConstructor)
{
this.emptyPlaceholder = (emptyPlaceholder || WebInspector.UIString("No Properties"));
this.object = object;
this.ignoreHasOwnProperty = ignoreHasOwnProperty;
this.extraProperties = extraProperties;
this.treeElementConstructor = treeElementConstructor || WebInspector.ObjectPropertyTreeElement;
this.editable = true;
WebInspector.PropertiesSection.call(this, title, subtitle);
}
WebInspector.ObjectPropertiesSection.prototype = {
onpopulate: function()
{
this.update();
},
update: function()
{
var self = this;
function callback(properties)
{
if (!properties)
return;
self.updateProperties(properties);
}
if (this.ignoreHasOwnProperty)
this.object.getAllProperties(callback);
else
this.object.getOwnProperties(callback);
},
updateProperties: function(properties, rootTreeElementConstructor, rootPropertyComparer)
{
if (!rootTreeElementConstructor)
rootTreeElementConstructor = this.treeElementConstructor;
if (!rootPropertyComparer)
rootPropertyComparer = WebInspector.ObjectPropertiesSection.CompareProperties;
if (this.extraProperties)
for (var i = 0; i < this.extraProperties.length; ++i)
properties.push(this.extraProperties[i]);
properties.sort(rootPropertyComparer);
this.propertiesTreeOutline.removeChildren();
for (var i = 0; i < properties.length; ++i) {
properties[i].parentObject = this.object;
this.propertiesTreeOutline.appendChild(new rootTreeElementConstructor(properties[i]));
}
if (!this.propertiesTreeOutline.children.length) {
var title = "<div class=\"info\">" + this.emptyPlaceholder + "</div>";
var infoElement = new TreeElement(null, null, false);
infoElement.titleHTML = title;
this.propertiesTreeOutline.appendChild(infoElement);
}
this.propertiesForTest = properties;
}
}
WebInspector.ObjectPropertiesSection.prototype.__proto__ = WebInspector.PropertiesSection.prototype;
WebInspector.ObjectPropertiesSection.CompareProperties = function(propertyA, propertyB)
{
var a = propertyA.name;
var b = propertyB.name;
if (a === "__proto__")
return 1;
if (b === "__proto__")
return -1;
var diff = 0;
var chunk = /^\d+|^\D+/;
var chunka, chunkb, anum, bnum;
while (diff === 0) {
if (!a && b)
return -1;
if (!b && a)
return 1;
chunka = a.match(chunk)[0];
chunkb = b.match(chunk)[0];
anum = !isNaN(chunka);
bnum = !isNaN(chunkb);
if (anum && !bnum)
return -1;
if (bnum && !anum)
return 1;
if (anum && bnum) {
diff = chunka - chunkb;
if (diff === 0 && chunka.length !== chunkb.length) {
if (!+chunka && !+chunkb) return chunka.length - chunkb.length;
else
return chunkb.length - chunka.length;
}
} else if (chunka !== chunkb)
return (chunka < chunkb) ? -1 : 1;
a = a.substring(chunka.length);
b = b.substring(chunkb.length);
}
return diff;
}
WebInspector.ObjectPropertyTreeElement = function(property)
{
this.property = property;
TreeElement.call(this, "", null, false);
}
WebInspector.ObjectPropertyTreeElement.prototype = {
onpopulate: function()
{
if (this.children.length && !this.shouldRefreshChildren)
return;
var callback = function(properties) {
this.removeChildren();
if (!properties)
return;
properties.sort(WebInspector.ObjectPropertiesSection.CompareProperties);
for (var i = 0; i < properties.length; ++i) {
this.appendChild(new this.treeOutline.section.treeElementConstructor(properties[i]));
}
};
this.property.value.getOwnProperties(callback.bind(this));
},
ondblclick: function(event)
{
this.startEditing();
},
onattach: function()
{
this.update();
},
update: function()
{
this.nameElement = document.createElement("span");
this.nameElement.className = "name";
this.nameElement.textContent = this.property.name;
var separatorElement = document.createElement("span");
separatorElement.className = "separator";
separatorElement.textContent = ": ";
this.valueElement = document.createElement("span");
this.valueElement.className = "value";
var description = this.property.value.description;
if (this.property.wasThrown)
this.valueElement.textContent = "[Exception: " + description + "]";
else if (this.property.value.type === "string" && typeof description === "string") {
this.valueElement.textContent = "\"" + description.replace(/\n/g, "\u21B5") + "\"";
this.valueElement._originalTextContent = "\"" + description + "\"";
} else if (this.property.value.type === "function" && typeof description === "string") {
this.valueElement.textContent = /.*/.exec(description)[0].replace(/ +$/g, "");
this.valueElement._originalTextContent = description;
} else
this.valueElement.textContent = description;
if (this.property.isGetter)
this.valueElement.addStyleClass("dimmed");
if (this.property.wasThrown)
this.valueElement.addStyleClass("error");
if (this.property.value.type)
this.valueElement.addStyleClass("console-formatted-" + this.property.value.type);
if (this.property.value.type === "node")
this.valueElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), false);
this.listItemElement.removeChildren();
this.listItemElement.appendChild(this.nameElement);
this.listItemElement.appendChild(separatorElement);
this.listItemElement.appendChild(this.valueElement);
this.hasChildren = this.property.value.hasChildren && !this.property.wasThrown;
},
_contextMenuEventFired: function()
{
function selectNode(nodeId)
{
if (nodeId) {
WebInspector.panels.elements.switchToAndFocus(WebInspector.domAgent.nodeForId(nodeId));
}
}
function revealElement()
{
this.property.value.pushNodeToFrontend(selectNode);
}
var contextMenu = new WebInspector.ContextMenu();
contextMenu.appendItem(WebInspector.UIString("Reveal in Elements Panel"), revealElement.bind(this));
contextMenu.show(event);
},
updateSiblings: function()
{
if (this.parent.root)
this.treeOutline.section.update();
else
this.parent.shouldRefreshChildren = true;
},
startEditing: function()
{
if (WebInspector.isBeingEdited(this.valueElement) || !this.treeOutline.section.editable)
return;
var context = { expanded: this.expanded };
this.hasChildren = false;
this.listItemElement.addStyleClass("editing-sub-part");
if (typeof this.valueElement._originalTextContent === "string")
this.valueElement.textContent = this.valueElement._originalTextContent;
WebInspector.startEditing(this.valueElement, {
context: context,
commitHandler: this.editingCommitted.bind(this),
cancelHandler: this.editingCancelled.bind(this)
});
},
editingEnded: function(context)
{
this.listItemElement.scrollLeft = 0;
this.listItemElement.removeStyleClass("editing-sub-part");
if (context.expanded)
this.expand();
},
editingCancelled: function(element, context)
{
this.update();
this.editingEnded(context);
},
editingCommitted: function(element, userInput, previousContent, context)
{
if (userInput === previousContent)
return this.editingCancelled(element, context);
this.applyExpression(userInput, true);
this.editingEnded(context);
},
applyExpression: function(expression, updateInterface)
{
expression = expression.trim();
var expressionLength = expression.length;
function callback(error)
{
if (!updateInterface)
return;
if (error)
this.update();
if (!expressionLength) {
this.parent.removeChild(this);
} else {
this.updateSiblings();
}
};
this.property.parentObject.setPropertyValue(this.property.name, expression.trim(), callback.bind(this));
}
}
WebInspector.ObjectPropertyTreeElement.prototype.__proto__ = TreeElement.prototype;