Bug 1477603 - Part 7: Avoid React warning. r=ladybenko
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Fri, 24 Aug 2018 15:43:37 +0900
changeset 492307 3e8a0fc9cd2654b39f6b0a50a0ce1b31edaece0c
parent 492306 f881e86a5afe8e404962ee9af322f68ebbcb97f3
child 492308 8f6b82d44d0f39ab87a962745a4c96d5acecc4ad
push id1815
push userffxbld-merge
push dateMon, 15 Oct 2018 10:40:45 +0000
treeherdermozilla-release@18d4c09e9378 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersladybenko
bugs1477603
milestone63.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 1477603 - Part 7: Avoid React warning. r=ladybenko Differential Revision: https://phabricator.services.mozilla.com/D4189 Depends on D4048
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.js
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js
devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.js
@@ -58,15 +58,15 @@ class DebugTargetList extends PureCompon
     } = this.props;
 
     return dom.ul(
       {
         className: "debug-target-list" +
                    (isCollapsed ? " debug-target-list--collapsed" : ""),
         ref: this.listRef,
       },
-      targets.map(target =>
-        DebugTargetItem({ actionComponent, detailComponent, dispatch, target })),
+      targets.map((target, key) =>
+        DebugTargetItem({ actionComponent, detailComponent, dispatch, key, target })),
     );
   }
 }
 
 module.exports = DebugTargetList;
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js
@@ -19,17 +19,17 @@ class DebugTargetPane extends PureCompon
   static get propTypes() {
     return {
       actionComponent: PropTypes.any.isRequired,
       collapsibilityKey: PropTypes.string.isRequired,
       detailComponent: PropTypes.any.isRequired,
       dispatch: PropTypes.func.isRequired,
       isCollapsed: PropTypes.bool.isRequired,
       name: PropTypes.string.isRequired,
-      targets: PropTypes.arrayOf(PropTypes.Object).isRequired,
+      targets: PropTypes.arrayOf(PropTypes.object).isRequired,
     };
   }
 
   toggleCollapsibility() {
     const { collapsibilityKey, dispatch, isCollapsed } = this.props;
     dispatch(Actions.updateDebugTargetCollapsibility(collapsibilityKey, !isCollapsed));
   }
 
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
@@ -13,57 +13,59 @@ const PropTypes = require("devtools/clie
  */
 class ExtensionDetail extends PureComponent {
   static get propTypes() {
     return {
       target: PropTypes.object.isRequired,
     };
   }
 
-  renderField(name, value, title) {
+  renderField(key, name, value, title) {
     return [
-      dom.dt({}, name),
+      dom.dt({ key: `${ key }-dt` }, name),
       dom.dd(
         {
           className: "ellipsis-text",
+          key: `${ key }-dd`,
           title: title || value,
         },
         value,
       ),
     ];
   }
 
   renderUUID() {
     const { target } = this.props;
     const { manifestURL, uuid } = target.details;
 
     const value = [
       uuid,
       dom.a(
         {
           className: "extension-detail__manifest",
+          key: "manifest",
           href: manifestURL,
           target: "_blank",
         },
         "Manifest URL",
       )
     ];
 
-    return this.renderField("Internal UUID", value, uuid);
+    return this.renderField("uuid", "Internal UUID", value, uuid);
   }
 
   render() {
     const { target } = this.props;
     const { id, details } = target;
     const { location, uuid } = details;
 
     return dom.dl(
       {
         className: "extension-detail",
       },
-      location ? this.renderField("Location", location) : null,
-      this.renderField("Extension ID", id),
+      location ? this.renderField("location", "Location", location) : null,
+      this.renderField("extension", "Extension ID", id),
       uuid ? this.renderUUID() : null,
     );
   }
 }
 
 module.exports = ExtensionDetail;
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js
@@ -22,25 +22,26 @@ class WorkerDetail extends PureComponent
     };
   }
 
   renderFetch() {
     const { fetch } = this.props.target.details;
     const label = fetch === SERVICE_WORKER_FETCH_STATES.LISTENING
                     ? "Listening for fetch events"
                     : "Not listening for fetch events";
-    return this.renderField("Fetch", label);
+    return this.renderField("fetch", "Fetch", label);
   }
 
-  renderField(name, value) {
+  renderField(key, name, value) {
     return [
-      dom.dt({}, name),
+      dom.dt({ key: `${ key }-dt` }, name),
       dom.dd(
         {
           className: "ellipsis-text",
+          key: `${ key }-dd`,
           title: value,
         },
         value,
       ),
     ];
   }
 
   renderStatus() {
@@ -57,15 +58,15 @@ class WorkerDetail extends PureComponent
   render() {
     const { fetch, scope, status } = this.props.target.details;
 
     return dom.dl(
       {
         className: "worker-detail",
       },
       fetch ? this.renderFetch() : null,
-      scope ? this.renderField("Scope", scope) : null,
+      scope ? this.renderField("scope", "Scope", scope) : null,
       status ? this.renderStatus() : null,
     );
   }
 }
 
 module.exports = WorkerDetail;