Bug 1336621 - Add keys in Frame and StackTrace components. r=Honza draft
authorJ. Ryan Stinnett <jryans@gmail.com>
Fri, 03 Feb 2017 16:54:14 -0600
changeset 479656 60725781f2067ca7d92fc810232d81e845a5c18c
parent 468005 f7e1982a2582b14c5885d787b530f879da3a040e
child 479657 5d3b1d59631570f8a80d98f5a0e67b4c5c436f0e
push id44319
push userbmo:jryans@gmail.com
push dateTue, 07 Feb 2017 02:36:30 +0000
reviewersHonza
bugs1336621
milestone54.0a1
Bug 1336621 - Add keys in Frame and StackTrace components. r=Honza MozReview-Commit-ID: 8GUYouvklxA
devtools/client/shared/components/frame.js
devtools/client/shared/components/stack-trace.js
--- a/devtools/client/shared/components/frame.js
+++ b/devtools/client/shared/components/frame.js
@@ -164,53 +164,60 @@ module.exports = createClass({
     if (showFunctionName) {
       let functionDisplayName = frame.functionDisplayName;
       if (!functionDisplayName && showAnonymousFunctionName) {
         functionDisplayName = webl10n.getStr("stacktrace.anonymousFunction");
       }
 
       if (functionDisplayName) {
         elements.push(
-          dom.span({ className: "frame-link-function-display-name" },
-            functionDisplayName),
+          dom.span({
+            key: "function-display-name",
+            className: "frame-link-function-display-name",
+          }, functionDisplayName),
           " "
         );
       }
     }
 
     let displaySource = showFullSourceUrl ? long : short;
     if (isSourceMapped) {
       displaySource = getSourceMappedFile(displaySource);
     } else if (showEmptyPathAsHost && (displaySource === "" || displaySource === "/")) {
       displaySource = host;
     }
 
     sourceElements.push(dom.span({
+      key: "filename",
       className: "frame-link-filename",
     }, displaySource));
 
     // If we have a line number > 0.
     if (line) {
       let lineInfo = `:${line}`;
       // Add `data-line` attribute for testing
       attributes["data-line"] = line;
 
       // Intentionally exclude 0
       if (column) {
         lineInfo += `:${column}`;
         // Add `data-column` attribute for testing
         attributes["data-column"] = column;
       }
 
-      sourceElements.push(dom.span({ className: "frame-link-line" }, lineInfo));
+      sourceElements.push(dom.span({
+        key: "line",
+        className: "frame-link-line"
+      }, lineInfo));
     }
 
     // Inner el is useful for achieving ellipsis on the left and correct LTR/RTL
     // ordering. See CSS styles for frame-link-source-[inner] and bug 1290056.
     let sourceInnerEl = dom.span({
+      key: "source-inner",
       className: "frame-link-source-inner",
       title: isLinkable ?
         l10n.getFormatStr("frame.viewsourceindebugger", tooltip) : tooltip,
     }, sourceElements);
 
     // If source is not a URL (self-hosted, eval, etc.), don't make
     // it an anchor link, as we can't link to it.
     if (isLinkable) {
@@ -220,20 +227,25 @@ module.exports = createClass({
           onClick(this.getSource(frame));
         },
         href: source,
         className: "frame-link-source",
         draggable: false,
       }, sourceInnerEl);
     } else {
       sourceEl = dom.span({
+        key: "source",
         className: "frame-link-source",
       }, sourceInnerEl);
     }
     elements.push(sourceEl);
 
     if (showHost && host) {
-      elements.push(" ", dom.span({ className: "frame-link-host" }, host));
+      elements.push(" ");
+      elements.push(dom.span({
+        key: "host",
+        className: "frame-link-host",
+      }, host));
     }
 
     return dom.span(attributes, ...elements);
   }
 });
--- a/devtools/client/shared/components/stack-trace.js
+++ b/devtools/client/shared/components/stack-trace.js
@@ -40,25 +40,27 @@ const StackTrace = createClass({
   render() {
     let {
       stacktrace,
       onViewSourceInDebugger,
       onViewSourceInScratchpad
     } = this.props;
 
     let frames = [];
-    stacktrace.forEach(s => {
+    stacktrace.forEach((s, i) => {
       if (s.asyncCause) {
         frames.push("\t", AsyncFrame({
+          key: i,
           asyncCause: s.asyncCause
         }), "\n");
       }
 
       let source = s.filename.split(" -> ").pop();
       frames.push("\t", Frame({
+        key: i,
         frame: {
           functionDisplayName: s.functionName,
           source,
           line: s.lineNumber,
           column: s.columnNumber,
         },
         showFunctionName: true,
         showAnonymousFunctionName: true,