Bug 1529518: Polish extension item. r=ladybenko,Ola
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 19 Mar 2019 11:17:04 +0000
changeset 464999 600afe2d45881ef9ce2abcec01e9457c816772d2
parent 464998 9f76239ec701bda25ba5502bbf39fc4439ac44ed
child 465000 77a7a2abdde34a01390a72c0b7ffefbbb76469d7
push id112486
push useropoprus@mozilla.com
push dateTue, 19 Mar 2019 16:41:04 +0000
treeherdermozilla-inbound@ee866fb50236 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersladybenko, Ola
bugs1529518
milestone68.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 1529518: Polish extension item. r=ladybenko,Ola Depends on D21887 Differential Revision: https://phabricator.services.mozilla.com/D21888
devtools/client/aboutdebugging-new/aboutdebugging.css
devtools/client/aboutdebugging-new/src/base.css
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.css
devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.css
devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.js
devtools/client/aboutdebugging-new/src/components/debugtarget/moz.build
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -18,16 +18,16 @@
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.css";
+@import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionDetail.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/shared/Message.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarFixedItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.css";
--- a/devtools/client/aboutdebugging-new/src/base.css
+++ b/devtools/client/aboutdebugging-new/src/base.css
@@ -389,14 +389,15 @@ Form controls
 
 /*
  * Card UI, from Photon
  */
 .card {
   background-color: var(--white-100); /* from common.inc.css */
   border-radius: var(--base-unit); /* from common.inc.css */
   box-shadow: 0 1px 4px var(--grey-90-a10); /* from common.inc.css */
+  padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
 }
 
 .card__heading {
   font-size: var(--title-20-font-size); /* Note: this is from Photon Title 20 */
   font-weight: var(--title-20-font-weight); /* Note: this is from Photon Title 20 */
 }
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
@@ -5,58 +5,61 @@
 /*
  * The current layout of debug target item is
  *
  *  +--------+-----------------------------+----------------+
  *  |        | Name                        |                |
  *  | [Icon] |-----------------------------| Action button  |
  *  |        | Subname                     |                |
  *  +--------+-----------------------------+----------------+
- *  |        | Detail                                       |
- *  |        |                                              |
- *  +--------+----------------------------------------------+
+ *  | Detail                                                |
+ *  |                                                       |
+ *  +-------------------------------------------------------+
  */
 .debug-target-item {
   display: grid;
   grid-template-columns: calc(var(--base-unit) * 8) 1fr max-content;
   grid-template-rows: 1fr minmax(0, auto) auto;
   grid-column-gap: calc(var(--base-unit) * 2);
-  grid-template-areas: "icon name    action"
-                       "icon subname action"
-                       ".    detail  detail";
+  grid-template-areas: "icon   name    action"
+                       "icon   subname action"
+                       "detail detail  detail";
   margin-block-end: calc(var(--base-unit) * 4);
 
   padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
   padding-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
 }
 
 .debug-target-item__icon {
   align-self: center;
   grid-area: icon;
+  margin-inline-start: calc(var(--base-unit) * 3);
   width: 100%;
 }
 
 .debug-target-item__name {
   align-self: center;
   grid-area: name;
   font-size: var(--body-20-font-size);
   font-weight: var(--body-20-font-weight);
   line-height: 1.5;
+  margin-inline-start: calc(var(--base-unit) * 3);
 }
 
 .debug-target-item__action {
   grid-area: action;
   align-self: center;
+  margin-inline-end: calc(var(--base-unit) * 2);
 }
 
 .debug-target-item__detail {
   grid-area: detail;
-  font-size: var(--caption-20-font-size);
-  font-weight: var(--caption-20-font-weight);
+  margin-block-start: calc(var(--base-unit) * 3);
 }
 
 .debug-target-item__subname {
   grid-area: subname;
   color: var(--grey-50);
   font-size: var(--caption-20-font-size);
   font-weight: var(--caption-20-font-weight);
   line-height: 1.5;
+  margin-inline-start: calc(var(--base-unit) * 3);
 }
deleted file mode 100644
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/* 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/. */
-
-/*
- * The current layout of extension detail is
- *
- *  +----------------+--------------------+
- *  | detail name dt | detail value dd    |
- *  | (auto)         |                    |
- *  +----------------+--------------------+
- *  | detail name dt | detail value dd    |
- *  +----------------+--------------------+
- *  | detail name dt | detail value dd    |
- *  +----------------+--------------------+
- */
-.extension-detail {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-column-gap: calc(var(--base-unit) * 2);
-}
-
-.extension-detail__manifest {
-  margin-inline-start: 1ch;
-}
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
@@ -26,16 +26,21 @@ class ExtensionDetail extends PureCompon
       // Provided by wrapping the component with FluentReact.withLocalization.
       getString: PropTypes.func.isRequired,
       target: Types.debugTarget.isRequired,
     };
   }
 
   renderWarnings() {
     const { warnings } = this.props.target.details;
+
+    if (!warnings.length) {
+      return null;
+    }
+
     return dom.section(
       {},
       warnings.map((warning, index) => {
         return Message(
           {
             level: MESSAGE_LEVEL.WARNING,
             key: `warning-${index}`,
           },
@@ -46,65 +51,45 @@ class ExtensionDetail extends PureCompon
             warning
           )
         );
       })
     );
   }
 
   renderUUID() {
-    const { manifestURL, uuid } = this.props.target.details;
+    const { uuid } = this.props.target.details;
     if (!uuid) {
       return null;
     }
 
-    const value = [
-      uuid,
-      Localized(
-        {
-          id: "about-debugging-extension-manifest-link",
-          key: "manifest",
-        },
-        dom.a(
-          {
-            className: "extension-detail__manifest js-manifest-url",
-            href: manifestURL,
-            target: "_blank",
-          },
-          "Manifest URL",
-        )
-      ),
-    ];
-
     return Localized(
       {
         id: "about-debugging-extension-uuid",
         attrs: { label: true },
       },
       FieldPair(
         {
-          slug: "uuid",
           label: "Internal UUID",
-          value,
+          value: uuid,
         }
       )
     );
   }
 
   renderExtensionId() {
     const { id } = this.props.target;
 
     return Localized(
       {
         id: "about-debugging-extension-id",
         attrs: { label: true },
       },
       FieldPair(
         {
-          slug: "extension",
           label: "Extension ID",
           value: id,
         }
       )
     );
   }
 
   renderLocation() {
@@ -115,35 +100,62 @@ class ExtensionDetail extends PureCompon
 
     return Localized(
       {
         id: "about-debugging-extension-location",
         attrs: { label: true },
       },
       FieldPair(
         {
-          slug: "location",
           label: "Location",
           value: location,
         }
       )
     );
   }
 
+  renderManifest() {
+    const { manifestURL } = this.props.target.details;
+    if (!manifestURL) {
+      return null;
+    }
+
+    const link = dom.a(
+      {
+        className: "js-manifest-url",
+        href: manifestURL,
+        target: "_blank",
+      },
+      manifestURL,
+    );
+
+    return Localized(
+      {
+        id: "about-debugging-extension-manifest-link",
+        attrs: { label: true },
+      },
+      FieldPair(
+        {
+          label: "Manifest URL",
+          value: link,
+        }
+      )
+    );
+  }
+
   render() {
     return dom.section(
       {
         className: "debug-target-item__detail",
       },
       this.renderWarnings(),
       dom.dl(
-        {
-          className: "extension-detail",
-        },
+        {},
         this.renderLocation(),
         this.renderExtensionId(),
         this.renderUUID(),
+        this.renderManifest(),
       ),
     );
   }
 }
 
 module.exports = FluentReact.withLocalization(ExtensionDetail);
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.css
@@ -0,0 +1,28 @@
+/* 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/. */
+
+.fieldpair {
+  display: flex;
+  border-top: 1px solid var(--grey-20);
+  padding-block: calc(var(--base-unit) * 2);
+  padding-inline: calc(var(--base-unit) * 4) calc(var(--base-unit) * 2);
+}
+
+.fieldpair:last-child {
+  padding-block-end: 0;
+}
+
+.fieldpair__title {
+  margin-inline-end: var(--base-unit);
+  font-size: var(--caption-20-font-size);
+  font-weight: var(--caption-20-font-weight);
+}
+
+.fieldpair__description {
+  color: var(--grey-50);
+  flex: 1;
+  font-size: var(--caption-20-font-size);
+  font-weight: var(--caption-20-font-weight);
+  text-align: right;
+}
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.js
@@ -3,42 +3,41 @@
 /* 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 */
+/* Renders a pair of `<dt>` (label) + `<dd>` (value) field. */
 class FieldPair extends PureComponent {
   static get propTypes() {
     return {
       className: PropTypes.string,
       label: PropTypes.node.isRequired,
-      slug: PropTypes.string.isRequired,
       value: PropTypes.node,
     };
   }
 
   render() {
-    const { slug, label, value } = this.props;
-    return [
+    const { label, value } = this.props;
+    return dom.div(
+      {
+        className: "fieldpair",
+      },
       dom.dt(
         {
-          key: `${slug}-dt`,
-          className: this.props.className ? this.props.className : "",
+          className: "fieldpair__title " +
+                      (this.props.className ? this.props.className : ""),
         },
         label
       ),
       value ? dom.dd(
         {
-          key: `${slug}-dd`,
-          className: "ellipsis-text",
+          className: "fieldpair__description ellipsis-text",
         },
         value) : null,
-    ];
+    );
   }
 }
 
 module.exports = FieldPair;
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/moz.build
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/moz.build
@@ -5,18 +5,18 @@
 DevToolsModules(
     'DebugTargetItem.css',
     'DebugTargetItem.js',
     'DebugTargetList.css',
     'DebugTargetList.js',
     'DebugTargetPane.css',
     'DebugTargetPane.js',
     'ExtensionAction.js',
-    'ExtensionDetail.css',
     'ExtensionDetail.js',
+    'FieldPair.css',
     'FieldPair.js',
     'InspectAction.js',
     'ServiceWorkerAction.js',
     'TabDetail.js',
     'TemporaryExtensionAction.js',
     'TemporaryExtensionDetail.css',
     'TemporaryExtensionDetail.js',
     'TemporaryExtensionInstaller.js',