Show the 'inl' badge on inlined frames showing in marker stacks. (#5628)

Author: canova

locales/en-US/app.ftl

@@ -47,6 +47,14 @@ AppViewRouter--error-from-localhost-url-safari =
 AppViewRouter--route-not-found--home =
     .specialMessage = The URL you tried to reach was not recognized.
 
+## Backtrace
+## This is used to display a backtrace (call stack) for a marker or sample.
+
+# Variables:
+#   $function (String) - Name of the function that was inlined.
+Backtrace--inlining-badge = (inlined)
+    .title = { $function } was inlined into its caller by the compiler.
+
 ## CallNodeContextMenu
 ## This is used as a context menu for the Call Tree, Flame Graph and Stack Chart
 ## panels.

src/components/calltree/CallTree.css

@@ -31,6 +31,7 @@
 }
 
 .treeBadge.inlined,
-.treeBadge.divergent-inlining {
+.treeBadge.divergent-inlining,
+.backtraceBadge.inlined {
   background: url(../../../res/img/svg/inlined-icon.svg);
 }

src/components/shared/Backtrace.tsx

@@ -3,7 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import classNames from 'classnames';
+import { Localized } from '@fluent/react';
 import { getBacktraceItemsForStack } from 'firefox-profiler/profile-logic/transforms';
+import { getFunctionName } from 'firefox-profiler/profile-logic/function-info';
 
 import type {
   CategoryList,
@@ -39,21 +41,34 @@ export function Backtrace(props: Props) {
         {funcNamesAndOrigins
           // Truncate the stacks
           .slice(0, maxStacks)
-          .map(({ funcName, origin, isFrameLabel, category }, i) => (
-            <li
-              key={i}
-              className={classNames('backtraceStackFrame', {
-                backtraceStackFrame_isFrameLabel: isFrameLabel,
-              })}
-            >
-              <span
-                className={`colored-border category-color-${categories[category].color}`}
-                title={categories[category].name}
-              />
-              {funcName}
-              <em className="backtraceStackFrameOrigin">{origin}</em>
-            </li>
-          ))}
+          .map(
+            ({ funcName, origin, isFrameLabel, category, inlineDepth }, i) => (
+              <li
+                key={i}
+                className={classNames('backtraceStackFrame', {
+                  backtraceStackFrame_isFrameLabel: isFrameLabel,
+                })}
+              >
+                <span
+                  className={`colored-border category-color-${categories[category].color}`}
+                  title={categories[category].name}
+                />
+                {inlineDepth > 0 ? (
+                  <Localized
+                    id="Backtrace--inlining-badge"
+                    vars={{ function: getFunctionName(funcName) }}
+                    attrs={{ title: true }}
+                  >
+                    <span className="backtraceBadge inlined" title="inlined">
+                      (inlined)
+                    </span>
+                  </Localized>
+                ) : null}
+                {funcName}
+                <em className="backtraceStackFrameOrigin">{origin}</em>
+              </li>
+            )
+          )}
         {funcNamesAndOrigins.length > maxStacks
           ? [
               <span

src/components/shared/TreeView.css

@@ -132,7 +132,8 @@
   flex: none;
 }
 
-.treeBadge {
+.treeBadge,
+.backtraceBadge {
   display: inline-block;
   overflow: hidden;
   width: 12px;

src/profile-logic/transforms.ts

@@ -1589,6 +1589,8 @@ export type BacktraceItem = {
   // library instead.
   // May also be empty.
   origin: string;
+  // The inline depth of this frame. Frames with inline depth > 0 are inlined.
+  inlineDepth: number;
 };
 
 /**
@@ -1616,29 +1618,33 @@ export function getBacktraceItemsForStack(
       funcIndex: frameTable.func[frameIndex],
       frameLine: frameTable.line[frameIndex],
       frameColumn: frameTable.column[frameIndex],
+      inlineDepth: frameTable.inlineDepth[frameIndex],
     });
   }
 
   const funcMatchesImplementation = FUNC_MATCHES[implementationFilter];
   const path = unfilteredPath.filter(({ funcIndex }) =>
     funcMatchesImplementation(thread, funcIndex)
   );
-  return path.map(({ category, funcIndex, frameLine, frameColumn }) => {
-    return {
-      funcName: stringTable.getString(funcTable.name[funcIndex]),
-      category: category,
-      isFrameLabel: funcTable.resource[funcIndex] === -1,
-      origin: getOriginAnnotationForFunc(
-        funcIndex,
-        funcTable,
-        resourceTable,
-        stringTable,
-        sources,
-        frameLine,
-        frameColumn
-      ),
-    };
-  });
+  return path.map(
+    ({ category, funcIndex, frameLine, frameColumn, inlineDepth }) => {
+      return {
+        funcName: stringTable.getString(funcTable.name[funcIndex]),
+        category,
+        isFrameLabel: funcTable.resource[funcIndex] === -1,
+        origin: getOriginAnnotationForFunc(
+          funcIndex,
+          funcTable,
+          resourceTable,
+          stringTable,
+          sources,
+          frameLine,
+          frameColumn
+        ),
+        inlineDepth,
+      };
+    }
+  );
 }
 
 /**