Bug 1493695 - Extract renderField method to dedicated component. r=jdescottes,daisuke

Differential Revision: https://phabricator.services.mozilla.com/D11059

--HG--
extra : moz-landing-system : lando

devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js

@@ -11,6 +11,8 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const FluentReact = require("devtools/client/shared/vendor/fluent-react");
 const Localized = createFactory(FluentReact.Localized);
 
+const FieldPair = createFactory(require("./FieldPair"));
+
 /**
  * This component displays detail information for extension.
  */
@@ -23,20 +25,6 @@ class ExtensionDetail extends PureComponent {
     };
   }
 
-  renderField(key, name, value, title) {
-    return [
-      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;
@@ -59,8 +47,37 @@ class ExtensionDetail extends PureComponent {
       ),
     ];
 
-    const uuidName = this.props.getString("about-debugging-extension-uuid");
-    return this.renderField("uuid", uuidName, value, uuid);
+    return Localized(
+      {
+        id: "about-debugging-extension-uuid",
+        attrs: { label: true },
+      },
+      FieldPair(
+        {
+          slug: "uuid",
+          label: "Internal UUID",
+          value,
+        }
+      )
+    );
+  }
+
+  renderLocation() {
+    const { location } = this.props.target.details;
+
+    return Localized(
+      {
+        id: "about-debugging-extension-location",
+        attrs: { label: true },
+      },
+      FieldPair(
+        {
+          slug: "location",
+          label: "Location",
+          value: location,
+        }
+      )
+    );
   }
 
   render() {
@@ -68,15 +85,24 @@ class ExtensionDetail extends PureComponent {
     const { id, details } = target;
     const { location, uuid } = details;
 
-    const locationName = this.props.getString("about-debugging-extension-location");
-    const idName = this.props.getString("about-debugging-extension-id");
-
     return dom.dl(
       {
         className: "extension-detail",
       },
-      location ? this.renderField("location", locationName, location) : null,
-      this.renderField("extension", idName, id),
+      location ? this.renderLocation() : null,
+      Localized(
+        {
+          id: "about-debugging-extension-id",
+          attrs: { label: true },
+        },
+        FieldPair(
+          {
+            slug: "extension",
+            label: "Extension ID",
+            value: id,
+          }
+        )
+      ),
       uuid ? this.renderUUID() : null,
     );
   }

devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.js

@@ -0,0 +1,40 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+/* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+/* Renders a pair of `<dt>` (label) + `<dd>` (value) field.
+ * It also needs a 'slug' prop, which it's an ID that will be used to generate
+ * a React key for the dom element */
+class FieldPair extends PureComponent {
+  static get propTypes() {
+    return {
+      slug: PropTypes.string.isRequired,
+      label: PropTypes.node.isRequired,
+      value: PropTypes.node,
+    };
+  }
+
+  render() {
+    const { slug, label, value } = this.props;
+    return [
+      dom.dt(
+        { key: `${slug}-dt` },
+        label
+      ),
+      value ? dom.dd(
+        {
+          key: `${slug}-dd`,
+          className: "ellipsis-text",
+        },
+        value) : null,
+    ];
+  }
+}
+
+module.exports = FieldPair;

devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js

@@ -15,6 +15,8 @@ const {
   SERVICE_WORKER_FETCH_STATES,
 } = require("../../constants");
 
+const FieldPair = createFactory(require("./FieldPair"));
+
 /**
  * This component displays detail information for worker.
  */
@@ -27,61 +29,63 @@ class WorkerDetail extends PureComponent {
     };
   }
 
-  getStatusFtlId(status) {
-    switch (status) {
-      case "running":
-        return "about-debugging-worker-status-running";
-      case "stopped":
-        return "about-debugging-worker-status-stopped";
-      case "registering":
-        return "about-debugging-worker-status-registering";
-      default:
-        // Provided with a null id, Localized will simply use the fallback value defined
-        // in the component.
-        return null;
-    }
-  }
-
   renderFetch() {
     const { fetch } = this.props.target.details;
-    const name = this.props.getString("about-debugging-worker-fetch");
-    const label = fetch === SERVICE_WORKER_FETCH_STATES.LISTENING
-                    ? this.props.getString("about-debugging-worker-fetch-listening")
-                    : this.props.getString("about-debugging-worker-fetch-not-listening");
-    return this.renderField("fetch", name, label);
+    const status = fetch === SERVICE_WORKER_FETCH_STATES.LISTENING
+                    ? "listening"
+                    : "not-listening";
+
+    return Localized(
+      {
+        id: "about-debugging-worker-fetch",
+        attrs: { label: true, value: true },
+        $status: status,
+      },
+      FieldPair(
+        {
+          slug: "fetch",
+          label: "Fetch",
+          value: status,
+        }
+      )
+    );
   }
 
-  renderField(key, name, value) {
-    return [
-      dom.dt({ key: `${ key }-dt` }, name),
-      dom.dd(
+  renderScope() {
+    const { scope } = this.props.target.details;
+
+    return Localized(
+      {
+        id: "about-debugging-worker-scope",
+        attrs: { label: true },
+      },
+      FieldPair(
         {
-          className: "ellipsis-text",
-          key: `${ key }-dd`,
-          title: value,
-        },
-        value,
+          slug: "scope",
+          label: "Scope",
+          value: scope,
+        }
       ),
-    ];
+    );
   }
 
   renderStatus() {
     const status = this.props.target.details.status.toLowerCase();
-    const ftlId = this.getStatusFtlId(status);
 
-    return dom.dt(
-      {},
-      Localized(
-        {
-          id: ftlId,
-        },
-        dom.span(
+    return FieldPair(
+      {
+        slug: "status",
+        label: Localized(
           {
-            className: `badge ${status === "running" ? "badge--success" : ""}`,
+            id: "about-debugging-worker-status",
+            $status: status,
           },
-          status
-        )
-      )
+          dom.span(
+            { className: `badge ${status === "running" ? "badge--success" : ""}`},
+            status
+          )
+        ),
+      }
     );
   }
 
@@ -93,7 +97,7 @@ class WorkerDetail extends PureComponent {
         className: "worker-detail",
       },
       fetch ? this.renderFetch() : null,
-      scope ? this.renderField("scope", "Scope", scope) : null,
+      scope ? this.renderScope() : null,
       status ? this.renderStatus() : null,
     );
   }

devtools/client/aboutdebugging-new/src/components/debugtarget/moz.build

@@ -11,6 +11,7 @@ DevToolsModules(
     'DebugTargetPane.js',
     'ExtensionDetail.css',
     'ExtensionDetail.js',
+    'FieldPair.js',
     'InspectAction.js',
     'ServiceWorkerAction.js',
     'TabDetail.js',

devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl

@@ -139,11 +139,13 @@ about-debugging-extension-manifest-link = Manifest URL
 
 # Text displayed for extensions in "runtime" pages, before displaying the extension's uuid.
 # UUIDs look like b293e463-481e-5148-a487-5aaf7a130429
-about-debugging-extension-uuid = Internal UUID
+about-debugging-extension-uuid =
+  .label = Internal UUID
 
 # Text displayed for extensions (temporary extensions only) in "runtime" pages, before
 # displaying the location of the temporary extension.
-about-debugging-extension-location = Location
+about-debugging-extension-location =
+  .label = Location
 
 # Text displayed for extensions in "runtime" pages, before displaying the extension's ID.
 # For instance "geckoprofiler@mozilla.com" or "{ed26ddcb-5611-4512-a89a-51b8db81cfb2}".
@@ -176,28 +178,29 @@ about-debugging-worker-action-start = Start
 
 # Displayed for service workers in runtime pages,
 # "Fetch" is an event type and should not be localized.
-about-debugging-worker-fetch = Fetch
+# The status is used to indicate whether the service worker is currently listening
+# or not to "fetch" events.
+about-debugging-worker-fetch =
+  .label = Fetch
+  .value =
+    { $status ->
+      [listening] Listening for fetch events
+      [not-listening] Not listening for fetch events
+    }
 
-# Displayed for service workers in runtime pages, after about-debugging-worker-fetch,
-# to indicate the service worker is currently listening to "fetch" events.
-# "Fetch" is an event type and should not be localized.
-about-debugging-worker-fetch-listening = Listening for fetch events
+# Displayed for service workers in runtime pages, to indicate the status of a worker.
+# For workers for which no registration could be found yet, they are considered as
+# 'registering' (only active registrations are visible from about:debugging).
+about-debugging-worker-status =
+  { $status ->
+    [running] Running
+    [stopped] Stopped
+    [registering] Registering
+  }
 
-# Displayed for service workers in runtime pages, after about-debugging-worker-fetch,
-# to indicate the service worker is not listening to "fetch" events.
-# "Fetch" is an event type and should not be localized.
-about-debugging-worker-fetch-not-listening = Not listening for fetch events
-
-# Displayed for service workers in runtime pages, for service workers in RUNNING state.
-about-debugging-worker-status-running = Running
-
-# Displayed for service workers in runtime pages, for service workers in STOPPED state.
-about-debugging-worker-status-stopped = Stopped
-
-# Displayed for service workers in runtime pages, for service workers for which no
-# registration could be found yet. Only active registrations are visible from
-# about:debugging, so such service workers are considered as registering.
-about-debugging-worker-status-registering = Registering
+# Displayed for service workers in runtime pages, to label the scope of a worker
+about-debugging-worker-scope =
+  .label = Scope
 
 # Displayed for runtime info in runtime pages.
 # { $name } is brand name such as "Firefox Nightly"