WebInspector.HBox.call(this);
this.element.classList.add("paint-profiler-overview", "hbox");
this._canvasContainer = this.element.createChild("div", "paint-profiler-canvas-container");
+ this._progressBanner = this.element.createChild("div", "fill progress-banner hidden");
+ this._progressBanner.textContent = WebInspector.UIString("Profiling\u2026");
this._pieChart = new WebInspector.PieChart(55, this._formatPieChartTime.bind(this));
this.element.createChild("div", "paint-profiler-pie-chart").appendChild(this._pieChart.element);
this._update();
return;
}
+ this._progressBanner.classList.remove("hidden");
snapshot.requestImage(null, null, 1, this._showImageCallback);
snapshot.profile(onProfileDone.bind(this));
/**
*/
function onProfileDone(profiles)
{
+ this._progressBanner.classList.add("hidden");
this._profiles = profiles;
this._update();
}
{
WebInspector.VBox.call(this);
this.setMinimumSize(100, 25);
- this.element.classList.add("outline-disclosure");
- var sidebarTreeElement = this.element.createChild("ol", "sidebar-tree");
+ this.element.classList.add("outline-disclosure", "profiler-log-view", "section");
+ var sidebarTreeElement = this.element.createChild("ol", "sidebar-tree properties monospace");
sidebarTreeElement.addEventListener("mousemove", this._onMouseMove.bind(this), false);
sidebarTreeElement.addEventListener("mouseout", this._onMouseMove.bind(this), false);
sidebarTreeElement.addEventListener("contextmenu", this._onContextMenu.bind(this), true);
this.sidebarTree = new TreeOutline(sidebarTreeElement);
- this._popoverHelper = new WebInspector.ObjectPopoverHelper(this.element, this._getHoverAnchor.bind(this), this._resolveObjectForPopover.bind(this), undefined, true);
this._reset();
}
},
/**
+ * @param {!TreeOutline} treeOutline
+ * @param {!WebInspector.PaintProfilerLogItem} logItem
+ */
+ _appendLogItem: function(treeOutline, logItem)
+ {
+ var treeElement = new WebInspector.LogTreeElement(this, logItem);
+ treeOutline.appendChild(treeElement);
+ },
+
+ /**
* @param {number=} stepLeft
* @param {number=} stepRight
*/
updateWindow: function(stepLeft, stepRight)
{
+ this.sidebarTree.removeChildren();
+ if (!this._log)
+ return;
stepLeft = stepLeft || 0;
stepRight = stepRight || this._log.length - 1;
- this.sidebarTree.removeChildren();
- for (var i = stepLeft; i <= stepRight; ++i) {
- var node = new WebInspector.LogTreeElement(this, this._log[i]);
- this.sidebarTree.appendChild(node);
- }
+ for (var i = stepLeft; i <= stepRight; ++i)
+ this._appendLogItem(this.sidebarTree, this._log[i]);
},
_reset: function()
},
/**
- * @param {!Element} target
- * @return {!Element}
- */
- _getHoverAnchor: function(target)
- {
- return /** @type {!Element} */ (target.enclosingNodeOrSelfWithNodeName("span"));
- },
-
- /**
- * @param {!Element} element
- * @param {function(!WebInspector.RemoteObject, boolean, !Element=):undefined} showCallback
- */
- _resolveObjectForPopover: function(element, showCallback)
- {
- var liElement = element.enclosingNodeOrSelfWithNodeName("li");
- var logItem = liElement.treeElement.representedObject;
- var obj = {"method": logItem.method};
- if (logItem.params)
- obj.params = logItem.params;
- showCallback(WebInspector.RemoteObject.fromLocalObject(obj), false);
- },
-
- /**
* @param {?Event} event
*/
_onMouseMove: function(event)
{
var node = this.sidebarTree.treeElementFromPoint(event.pageX, event.pageY);
- if (node === this._lastHoveredNode)
+ if (node === this._lastHoveredNode || !(node instanceof WebInspector.LogTreeElement))
return;
if (this._lastHoveredNode)
this._lastHoveredNode.setHovered(false);
if (!this._target)
return;
var node = this.sidebarTree.treeElementFromPoint(event.pageX, event.pageY);
- if (!node || !node.representedObject)
+ if (!node || !node.representedObject || !(node instanceof WebInspector.LogTreeElement))
return;
var logItem = /** @type {!WebInspector.PaintProfilerLogItem} */ (node.representedObject);
if (!logItem.nodeId())
{
TreeElement.call(this, "", logItem);
this._ownerView = ownerView;
- this._update();
+ this._filled = false;
}
WebInspector.LogTreeElement.prototype = {
+ onattach: function()
+ {
+ this._update();
+ this.hasChildren = !!this.representedObject.params;
+ },
+
+ onexpand: function()
+ {
+ if (this._filled)
+ return;
+ this._filled = true;
+ for (var param in this.representedObject.params)
+ WebInspector.LogPropertyTreeElement._appendLogPropertyItem(this, param, this.representedObject.params[param]);
+ },
+
/**
* @param {!Object} param
* @param {string} name
var logItem = this.representedObject;
var title = document.createDocumentFragment();
title.createChild("div", "selection");
- var span = title.createChild("span");
- var textContent = logItem.method;
- if (logItem.params)
- textContent += "(" + this._paramsToString(logItem.params) + ")";
- span.textContent = textContent;
+ title.createTextChild(logItem.method + "(" + this._paramsToString(logItem.params) + ")");
this.title = title;
},
};
/**
+ * @constructor
+ * @param {!{name: string, value}} property
+ * @extends {TreeElement}
+ */
+WebInspector.LogPropertyTreeElement = function(property)
+{
+ TreeElement.call(this, "", property);
+};
+
+/**
+ * @param {!TreeElement} element
+ * @param {string} name
+ * @param {*} value
+ */
+WebInspector.LogPropertyTreeElement._appendLogPropertyItem = function(element, name, value)
+{
+ var treeElement = new WebInspector.LogPropertyTreeElement({name: name, value: value});
+ element.appendChild(treeElement);
+ if (value && typeof value === "object") {
+ for (var property in value)
+ WebInspector.LogPropertyTreeElement._appendLogPropertyItem(treeElement, property, value[property]);
+ }
+};
+
+WebInspector.LogPropertyTreeElement.prototype = {
+ onattach: function()
+ {
+ var property = this.representedObject;
+ var title = document.createDocumentFragment();
+ title.createChild("div", "selection");
+ var nameElement = title.createChild("span", "name");
+ nameElement.textContent = property.name;
+ var separatorElement = title.createChild("span", "separator");
+ separatorElement.textContent = ": ";
+ if (property.value === null || typeof property.value !== "object") {
+ var valueElement = title.createChild("span", "value");
+ valueElement.textContent = JSON.stringify(property.value);
+ valueElement.classList.add("console-formatted-" + property.value === null ? "null" : typeof property.value);
+ }
+ this.title = title;
+ },
+
+ __proto__: TreeElement.prototype
+}
+
+/**
* @return {!Object.<string, !WebInspector.PaintProfilerCategory>}
*/
WebInspector.PaintProfilerView.categories = function()