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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: Source/devtools/front_end/timeline/TimelineUIUtils.js

Issue 1048663002: [invalidations] Convert invalidations to use TreeOutline (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Fix failing test to to shadowRoot.getElementsByClassName going away Created 5 years, 8 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 | « Source/devtools/devtools.gypi ('k') | Source/devtools/front_end/timeline/invalidationsTree.css » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: Source/devtools/front_end/timeline/TimelineUIUtils.js
diff --git a/Source/devtools/front_end/timeline/TimelineUIUtils.js b/Source/devtools/front_end/timeline/TimelineUIUtils.js
index a32b796afdf420e77bb7fee9098b290e5582e1ae..e3aa3bba79c33d46dc8f5c8ec1d545caeb43ddc9 100644
--- a/Source/devtools/front_end/timeline/TimelineUIUtils.js
+++ b/Source/devtools/front_end/timeline/TimelineUIUtils.js
@@ -699,7 +699,7 @@ WebInspector.TimelineUIUtils._generateCauses = function(event, target, contentHe
contentHelper.appendStackTrace(stackLabel || WebInspector.UIString("Stack trace"), event.stackTrace);
// Indirect causes.
- if (event.invalidationTrackingEvents) { // Full invalidation tracking (experimental).
+ if (event.invalidationTrackingEvents && target) { // Full invalidation tracking (experimental).
WebInspector.TimelineUIUtils._generateInvalidations(event, target, contentHelper);
} else if (initiator && initiator.stackTrace) { // Partial invalidation tracking.
contentHelper.appendStackTrace(callSiteStackLabel || WebInspector.UIString("First invalidated"), initiator.stackTrace);
@@ -708,7 +708,7 @@ WebInspector.TimelineUIUtils._generateCauses = function(event, target, contentHe
/**
* @param {!WebInspector.TracingModel.Event} event
- * @param {?WebInspector.Target} target
+ * @param {!WebInspector.Target} target
* @param {!WebInspector.TimelineDetailsContentHelper} contentHelper
*/
WebInspector.TimelineUIUtils._generateInvalidations = function(event, target, contentHelper)
@@ -732,7 +732,7 @@ WebInspector.TimelineUIUtils._generateInvalidations = function(event, target, co
/**
* @param {string} type
- * @param {?WebInspector.Target} target
+ * @param {!WebInspector.Target} target
* @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
* @param {!WebInspector.TimelineDetailsContentHelper} contentHelper
*/
@@ -754,10 +754,16 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ
var detailsNode = createElementWithClass("div", "timeline-details-view-row");
var titleElement = detailsNode.createChild("span", "timeline-details-view-row-title");
titleElement.textContent = WebInspector.UIString("%s: ", title);
- var eventsList = detailsNode.createChild("div", "timeline-details-view-row-value");
+
+ var invalidationsTreeOutline = new TreeOutlineInShadow();
+ invalidationsTreeOutline.registerRequiredCSS("timeline/invalidationsTree.css");
+ invalidationsTreeOutline.element.classList.add("timeline-details-view-row-value", "invalidations-tree");
+ detailsNode.appendChild(invalidationsTreeOutline.element);
+
var invalidationGroups = groupInvalidationsByCause(invalidations);
invalidationGroups.forEach(function(group) {
- appendInvalidationGroup(eventsList, group);
+ var groupElement = new WebInspector.TimelineUIUtils.InvalidationsGroupElement(target, contentHelper, group);
+ invalidationsTreeOutline.appendChild(groupElement);
});
contentHelper.element.appendChild(detailsNode);
@@ -789,74 +795,129 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ
}
return Object.values(causeToInvalidationMap);
}
+}
+
+/**
+ * @param {!Set<number>} nodeIds
+ * @param {!WebInspector.InvalidationTrackingEvent} invalidations
+ */
+WebInspector.TimelineUIUtils._collectInvalidationNodeIds = function(nodeIds, invalidations)
+{
+ for (var i = 0; i < invalidations.length; ++i) {
+ if (invalidations[i].nodeId)
+ nodeIds.add(invalidations[i].nodeId);
+ }
+}
+
+/**
+ * @constructor
+ * @param {!WebInspector.Target} target
+ * @param {!WebInspector.TimelineDetailsContentHelper} contentHelper
+ * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
+ * @extends {TreeElement}
+ */
+WebInspector.TimelineUIUtils.InvalidationsGroupElement = function(target, contentHelper, invalidations)
+{
+ TreeElement.call(this, "", true);
+
+ this.listItemElement.classList.add("header");
+ this.selectable = false;
+ this.toggleOnClick = true;
+
+ this._contentHelper = contentHelper;
+ this._invalidations = invalidations;
+ this.title = this._createTitle(target);
+}
+
+WebInspector.TimelineUIUtils.InvalidationsGroupElement.prototype = {
/**
- * @param {!Element} parentElement
- * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
+ * @param {!WebInspector.Target} target
+ * @return {!Element}
*/
- function appendInvalidationGroup(parentElement, invalidations)
+ _createTitle: function(target)
{
- if (!target)
- return;
-
- var row = parentElement.createChild("div", "invalidations-group section");
- var header = row.createChild("div", "header");
- header.addEventListener("click", function() {
- toggleDetails(header, invalidations);
- });
-
- var first = invalidations[0];
+ var first = this._invalidations[0];
var reason = first.cause.reason;
var topFrame = first.cause.stackTrace && first.cause.stackTrace[0];
+ var title = createElement("span");
if (reason)
- header.createTextChild(WebInspector.UIString("%s for ", reason));
+ title.createTextChild(WebInspector.UIString("%s for ", reason));
else
- header.createTextChild(WebInspector.UIString("Unknown cause for "));
-
- appendTruncatedNodeList(header, invalidations);
+ title.createTextChild(WebInspector.UIString("Unknown cause for "));
- if (topFrame && contentHelper.linkifier()) {
- header.createTextChild(WebInspector.UIString(". "));
- var stack = header.createChild("span", "monospace");
+ this._appendTruncatedNodeList(title, this._invalidations);
+ if (topFrame && this._contentHelper.linkifier()) {
+ title.createTextChild(WebInspector.UIString(". "));
+ var stack = title.createChild("span", "monospace");
stack.createChild("span").textContent = WebInspector.beautifyFunctionName(topFrame.functionName);
stack.createChild("span").textContent = " @ ";
- stack.createChild("span").appendChild(contentHelper.linkifier().linkifyConsoleCallFrame(target, topFrame));
+ stack.createChild("span").appendChild(this._contentHelper.linkifier().linkifyConsoleCallFrame(target, topFrame));
}
- }
+
+ return title;
+ },
/**
- * @param {!WebInspector.InvalidationTrackingEvent} invalidation
- * @param {boolean} showUnknownNodes
+ * @override
*/
- function createInvalidationNode(invalidation, showUnknownNodes)
+ onpopulate: function()
{
- var node = contentHelper.nodeForBackendId(invalidation.nodeId);
- if (node)
- return WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
- if (invalidation.nodeName) {
- var nodeSpan = createElement("span");
- nodeSpan.textContent = WebInspector.UIString("[ %s ]", invalidation.nodeName);
- return nodeSpan;
+ var content = createElementWithClass("div", "content");
+
+ var first = this._invalidations[0];
+ if (first.cause.stackTrace) {
+ var stack = content.createChild("div");
+ stack.createTextChild(WebInspector.UIString("Stack trace:"));
+ this._contentHelper.createChildStackTraceElement(stack, first.cause.stackTrace);
}
- if (showUnknownNodes) {
- var nodeSpan = createElement("span");
- return nodeSpan.createTextChild(WebInspector.UIString("[ unknown node ]"));
+
+ content.createTextChild(this._invalidations.length > 1 ? WebInspector.UIString("Nodes:") : WebInspector.UIString("Node:"));
+ var nodeList = content.createChild("div", "node-list");
+ var firstNode = true;
+ for (var i = 0; i < this._invalidations.length; i++) {
+ var invalidation = this._invalidations[i];
+ var invalidationNode = this._createInvalidationNode(invalidation, true);
+ if (invalidationNode) {
+ if (!firstNode)
+ nodeList.createTextChild(WebInspector.UIString(", "));
+ firstNode = false;
+
+ nodeList.appendChild(invalidationNode);
+
+ var extraData = invalidation.extraData ? ", " + invalidation.extraData : "";
+ if (invalidation.changedId)
+ nodeList.createTextChild(WebInspector.UIString("(changed id to \"%s\"%s)", invalidation.changedId, extraData));
+ else if (invalidation.changedClass)
+ nodeList.createTextChild(WebInspector.UIString("(changed class to \"%s\"%s)", invalidation.changedClass, extraData));
+ else if (invalidation.changedAttribute)
+ nodeList.createTextChild(WebInspector.UIString("(changed attribute to \"%s\"%s)", invalidation.changedAttribute, extraData));
+ else if (invalidation.changedPseudo)
+ nodeList.createTextChild(WebInspector.UIString("(changed pesudo to \"%s\"%s)", invalidation.changedPseudo, extraData));
+ else if (invalidation.selectorPart)
+ nodeList.createTextChild(WebInspector.UIString("(changed \"%s\"%s)", invalidation.selectorPart, extraData));
+ }
}
- }
+
+ var contentTreeElement = new TreeElement(content, false);
+ contentTreeElement.selectable = false;
+ this.appendChild(contentTreeElement);
+ },
/**
* @param {!Element} parentElement
* @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
*/
- function appendTruncatedNodeList(parentElement, invalidations)
+ _appendTruncatedNodeList: function(parentElement, invalidations)
{
var invalidationNodes = [];
var invalidationNodeIdMap = {};
for (var i = 0; i < invalidations.length; i++) {
var invalidation = invalidations[i];
- var invalidationNode = createInvalidationNode(invalidation, false);
+ var invalidationNode = this._createInvalidationNode(invalidation, false);
+ invalidationNode.addEventListener("click", consumeEvent, false);
if (invalidationNode && !invalidationNodeIdMap[invalidation.nodeId]) {
invalidationNodes.push(invalidationNode);
invalidationNodeIdMap[invalidation.nodeId] = true;
@@ -875,91 +936,29 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ
parentElement.appendChild(invalidationNodes[1]);
parentElement.createTextChild(WebInspector.UIString(", and %s others", invalidationNodes.length - 2));
}
- }
-
- /**
- * @param {!Element} header
- * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
- */
- function toggleDetails(header, invalidations)
- {
- var wasExpanded = header.classList.contains("expanded");
- header.classList.toggle("expanded", !wasExpanded);
- header.parentElement.classList.toggle("expanded", !wasExpanded);
-
- if (wasExpanded) {
- var content = header.nextElementSibling;
- if (content)
- content.remove();
- } else {
- createInvalidationGroupDetails(header.parentElement, invalidations);
- }
- }
+ },
/**
- * @param {!Element} parentElement
- * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
+ * @param {!WebInspector.InvalidationTrackingEvent} invalidation
+ * @param {boolean} showUnknownNodes
*/
- function createInvalidationGroupDetails(parentElement, invalidations)
+ _createInvalidationNode: function(invalidation, showUnknownNodes)
{
- var content = parentElement.createChild("div", "content");
-
- var first = invalidations[0];
- if (first.cause.stackTrace) {
- var stack = content.createChild("div");
- stack.createTextChild(WebInspector.UIString("Stack trace:"));
- contentHelper.createChildStackTraceElement(stack, first.cause.stackTrace);
+ var node = this._contentHelper.nodeForBackendId(invalidation.nodeId);
+ if (node)
+ return WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
+ if (invalidation.nodeName) {
+ var nodeSpan = createElement("span");
+ nodeSpan.textContent = WebInspector.UIString("[ %s ]", invalidation.nodeName);
+ return nodeSpan;
}
-
- content.createTextChild(invalidations.length > 1 ? WebInspector.UIString("Nodes:") : WebInspector.UIString("Node:"));
- var nodeList = content.createChild("div", "node-list timeline-details-view-row-stack-trace");
- appendDetailedNodeList(nodeList, invalidations);
- }
-
- /**
- * @param {!Element} parentElement
- * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
- */
- function appendDetailedNodeList(parentElement, invalidations)
- {
- var firstNode = true;
- for (var i = 0; i < invalidations.length; i++) {
- var invalidation = invalidations[i];
- var invalidationNode = createInvalidationNode(invalidation, true);
- if (invalidationNode) {
- if (!firstNode)
- parentElement.createTextChild(WebInspector.UIString(", "));
- firstNode = false;
-
- parentElement.appendChild(invalidationNode);
-
- var extraData = invalidation.extraData ? ", " + invalidation.extraData : "";
- if (invalidation.changedId) {
- parentElement.createTextChild(WebInspector.UIString("(changed id to \"%s\"%s)", invalidation.changedId, extraData));
- } else if (invalidation.changedClass) {
- parentElement.createTextChild(WebInspector.UIString("(changed class to \"%s\"%s)", invalidation.changedClass, extraData));
- } else if (invalidation.changedAttribute) {
- parentElement.createTextChild(WebInspector.UIString("(changed attribute to \"%s\"%s)", invalidation.changedAttribute, extraData));
- } else if (invalidation.changedPseudo) {
- parentElement.createTextChild(WebInspector.UIString("(changed pesudo to \"%s\"%s)", invalidation.changedPseudo, extraData));
- } else if (invalidation.selectorPart) {
- parentElement.createTextChild(WebInspector.UIString("(changed \"%s\"%s)", invalidation.selectorPart, extraData));
- }
- }
+ if (showUnknownNodes) {
+ var nodeSpan = createElement("span");
+ return nodeSpan.createTextChild(WebInspector.UIString("[ unknown node ]"));
}
- }
-}
+ },
-/**
- * @param {!Set<number>} nodeIds
- * @param {!WebInspector.InvalidationTrackingEvent} invalidations
- */
-WebInspector.TimelineUIUtils._collectInvalidationNodeIds = function(nodeIds, invalidations)
-{
- for (var i = 0; i < invalidations.length; ++i) {
- if (invalidations[i].nodeId)
- nodeIds.add(invalidations[i].nodeId);
- }
+ __proto__: TreeElement.prototype
}
/**
« no previous file with comments | « Source/devtools/devtools.gypi ('k') | Source/devtools/front_end/timeline/invalidationsTree.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698