Add a track to compute a diff of 2 profiles (Merge PR firefox-devtool…

…s#1883)
m1rp · Jul 12, 2019 · 74410df · 74410df
2 parents 464fe6a + 2448943
commit 74410df
Show file tree

Hide file tree

Showing 14 changed files with 1,099 additions and 174 deletions.
diff --git a/src/components/sidebar/CallTreeSidebar.js b/src/components/sidebar/CallTreeSidebar.js
@@ -117,13 +117,18 @@ class CategoryBreakdown extends React.PureComponent<CategoryBreakdownProps> {
       .sort(({ value: valueA }, { value: valueB }) => valueB - valueA)
       .filter(({ value }) => value);
 
-    const totalTime = data.reduce((accum, { value }) => accum + value, 0);
+    // Values can be negative for diffing tracks, that's why we use the absolute
+    // value to compute the total time. Indeed even if all values average out,
+    // we want to display a sensible percentage.
+    const totalTime = data.reduce(
+      (accum, { value }) => accum + Math.abs(value),
+      0
+    );
     const maxFractionalDigits = isIntervalInteger ? 0 : 1;
 
     return (
       <div className="sidebar-categorylist">
         {data.map(({ category, value, subcategories }) => {
-          const percentage = Math.round((value / totalTime) * 100);
           return (
             <React.Fragment key={category.name}>
               <div className="sidebar-categoryname">
@@ -137,7 +142,7 @@ class CategoryBreakdown extends React.PureComponent<CategoryBreakdownProps> {
               </div>
               <div className="sidebar-categorytiming">
                 {formatMilliseconds(value, 3, maxFractionalDigits)} (
-                {percentage}%)
+                {formatPercent(value / totalTime)})
               </div>
               {shouldDisplaySubcategoryInfoForCategory(category)
                 ? subcategories.map(({ name, value }) => (
@@ -252,8 +257,13 @@ class CallTreeSidebar extends React.PureComponent<Props> {
           </header>
           <h3 className="sidebar-title2">This selected call node</h3>
           <SidebarDetail label="Running Time">
-            {formatMilliseconds(totalTime.value, 3, maxFractionalDigits)} (
-            {totalTimePercent}%)
+            {totalTime.value
+              ? `${formatMilliseconds(
+                  totalTime.value,
+                  3,
+                  maxFractionalDigits
+                )} (${totalTimePercent}%)`
+              : '—'}
           </SidebarDetail>
           <SidebarDetail label="Self Time">
             {selfTime.value
@@ -296,8 +306,13 @@ class CallTreeSidebar extends React.PureComponent<Props> {
             This function across the entire tree
           </h3>
           <SidebarDetail label="Running Time">
-            {formatMilliseconds(totalTimeForFunc.value, 3, maxFractionalDigits)}{' '}
-            ({totalTimeForFuncPercent}%)
+            {totalTimeForFunc.value
+              ? `${formatMilliseconds(
+                  totalTimeForFunc.value,
+                  3,
+                  maxFractionalDigits
+                )} (${totalTimeForFuncPercent}%)`
+              : '—'}
           </SidebarDetail>
           <SidebarDetail label="Self Time">
             {selfTimeForFunc.value

diff --git a/src/profile-logic/call-tree.js b/src/profile-logic/call-tree.js
@@ -122,16 +122,23 @@ export class CallTree {
         children.length < childCount;
         childCallNodeIndex++
       ) {
+        const childPrefixIndex = this._callNodeTable.prefix[childCallNodeIndex];
+        const childTotalTime = this._callNodeTimes.totalTime[
+          childCallNodeIndex
+        ];
+        const childChildCount = this._callNodeChildCount[childCallNodeIndex];
+
         if (
-          this._callNodeTable.prefix[childCallNodeIndex] === callNodeIndex &&
-          this._callNodeTimes.totalTime[childCallNodeIndex] !== 0
+          childPrefixIndex === callNodeIndex &&
+          (childTotalTime !== 0 || childChildCount !== 0)
         ) {
           children.push(childCallNodeIndex);
         }
       }
       children.sort(
         (a, b) =>
-          this._callNodeTimes.totalTime[b] - this._callNodeTimes.totalTime[a]
+          Math.abs(this._callNodeTimes.totalTime[b]) -
+          Math.abs(this._callNodeTimes.totalTime[a])
       );
       this._children[callNodeIndex] = children;
     }
@@ -227,8 +234,8 @@ export class CallTree {
       );
 
       displayData = {
-        totalTime: formattedTotalTime,
-        totalTimeWithUnit: formattedTotalTime + 'ms',
+        totalTime: totalTime === 0 ? '—' : formattedTotalTime,
+        totalTimeWithUnit: totalTime === 0 ? '—' : formattedTotalTime + 'ms',
         selfTime: selfTime === 0 ? '—' : formattedSelfTime,
         selfTimeWithUnit: selfTime === 0 ? '—' : formattedSelfTime + 'ms',
         totalTimePercent: `${formatPercent(totalTimeRelative)}`,
@@ -380,19 +387,24 @@ export function computeCallTreeCountsAndTimings(
   let rootCount = 0;
 
   // We loop the call node table in reverse, so that we find the children
-  // before their parents.
+  // before their parents, and the total time is known at the time we reach a
+  // node.
   for (
     let callNodeIndex = callNodeTable.length - 1;
     callNodeIndex >= 0;
     callNodeIndex--
   ) {
     callNodeTotalTime[callNodeIndex] += callNodeLeafTime[callNodeIndex];
-    if (callNodeTotalTime[callNodeIndex] === 0) {
+    rootTotalTime += Math.abs(callNodeLeafTime[callNodeIndex]);
+    const hasChildren = callNodeChildCount[callNodeIndex] !== 0;
+    const hasTotalTime = callNodeTotalTime[callNodeIndex] !== 0;
+
+    if (!hasChildren && !hasTotalTime) {
       continue;
     }
+
     const prefixCallNode = callNodeTable.prefix[callNodeIndex];
     if (prefixCallNode === -1) {
-      rootTotalTime += callNodeTotalTime[callNodeIndex];
       rootCount++;
     } else {
       callNodeTotalTime[prefixCallNode] += callNodeTotalTime[callNodeIndex];