Bug 1503896 - (Part 1) Add keys to React components in Changes panel; r=pbro;
authorRazvan Caliman <rcaliman@mozilla.com>
Mon, 05 Nov 2018 14:39:42 +0000
changeset 444823 1601672ee6af41c7b233d469bcf1427b406261f2
parent 444822 bae65a2ae47d8a4462ca842e29b155166404f594
child 444824 33c358d0d2c2e10a9fd67c7a303ec2e2c9425a5e
push id35003
push userncsoregi@mozilla.com
push dateWed, 07 Nov 2018 16:16:52 +0000
treeherdermozilla-central@4407a6d3e374 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1503896
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1503896 - (Part 1) Add keys to React components in Changes panel; r=pbro; This isn't strictly necessary for this patch series, but it adds an optimization to improve performance for React rendering and solves warnings thrown while using React in dev mode. MozReview-Commit-ID: ujqOa9qUsd Differential Revision: https://phabricator.services.mozilla.com/D10582
devtools/client/inspector/changes/components/ChangesApp.js
--- a/devtools/client/inspector/changes/components/ChangesApp.js
+++ b/devtools/client/inspector/changes/components/ChangesApp.js
@@ -30,21 +30,31 @@ class ChangesApp extends PureComponent {
     // times: once as a child of its parent and once standalone.
     //
     // By keeping a log of rules previously rendered we prevent needless multi-rendering.
     this.renderedRules = [];
   }
 
   renderDeclarations(remove = {}, add = {}) {
     const removals = Object.entries(remove).map(([property, value]) => {
-      return CSSDeclaration({ className: "level diff-remove", property, value });
+      return CSSDeclaration({
+        key: "remove-" + property,
+        className: "level diff-remove",
+        property,
+        value,
+      });
     });
 
     const additions = Object.entries(add).map(([property, value]) => {
-      return CSSDeclaration({ className: "level diff-add", property, value });
+      return CSSDeclaration({
+        key: "add-" + property,
+        className: "level diff-add",
+        property,
+        value,
+      });
     });
 
     return [removals, additions];
   }
 
   renderRule(ruleId, rule, rules) {
     const selector = rule.selector;
 
@@ -52,16 +62,17 @@ class ChangesApp extends PureComponent {
       return null;
     }
 
     // Mark this rule as rendered so we don't render it again.
     this.renderedRules.push(ruleId);
 
     return dom.div(
       {
+        key: ruleId,
         className: "rule",
       },
       dom.div(
         {
           className: "level selector",
           title: selector,
         },
         selector,
@@ -80,16 +91,17 @@ class ChangesApp extends PureComponent {
   renderDiff(changes = {}) {
     // Render groups of style sources: stylesheets and element style attributes.
     return Object.entries(changes).map(([sourceId, source]) => {
       const href = source.href || `inline stylesheet #${source.index}`;
       const rules = source.rules;
 
       return dom.details(
         {
+          key: sourceId,
           className: "source devtools-monospace",
           open: true,
         },
         dom.summary(
           {
             className: "href",
             title: href,
           },