Bug 1529518: Polish tab item. r=ladybenko,Ola
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 19 Mar 2019 11:15:06 +0000
changeset 464998 9f76239ec701bda25ba5502bbf39fc4439ac44ed
parent 464997 88b47716a875abe4592c275234d1440cf4fbb99a
child 464999 600afe2d45881ef9ce2abcec01e9457c816772d2
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 tab item. r=ladybenko,Ola Differential Revision: https://phabricator.services.mozilla.com/D21887
devtools/client/aboutdebugging-new/src/base.css
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
devtools/client/aboutdebugging-new/src/components/debugtarget/TabDetail.js
devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js
--- a/devtools/client/aboutdebugging-new/src/base.css
+++ b/devtools/client/aboutdebugging-new/src/base.css
@@ -30,16 +30,17 @@
   --success-50: #30e60b;
   --warning-50: #ffe900;
   --warning-90: #3e2800;
   --error-50: #ff0039;
   --error-60: #d70022;
   --highlight-50: #0a84ff;
   --grey-20: #ededf0; /* for ui, no special semantic */
   --grey-30: #d7d7db; /* for ui, no special semantic */
+  --grey-50: #737373; /* for ui, no special semantic */
   --grey-90: #0c0c0d; /* for ui, no special semantic */
   --grey-90-a10: rgba(12, 12, 13, 0.1);
   --grey-90-a20: rgba(12, 12, 13, 0.2);
   --grey-90-a30: rgba(12, 12, 13, 0.3);
   --grey-90-a60: rgba(12, 12, 13, 0.6);
   --grey-90-a80: rgba(12, 12, 13, 0.8);
   --white-100: #fff; /* for ui, no special semantic */
 
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
@@ -1,47 +1,62 @@
 /* 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 debug target item is
  *
  *  +--------+-----------------------------+----------------+
- *  | [Icon] | Name                        | Action button  |
+ *  |        | Name                        |                |
+ *  | [Icon] |-----------------------------| Action button  |
+ *  |        | Subname                     |                |
  *  +--------+-----------------------------+----------------+
  *  |        | 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"
-                       ".    detail detail";
+  grid-template-areas: "icon name    action"
+                       "icon subname action"
+                       ".    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;
   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;
 }
 
 .debug-target-item__action {
   grid-area: action;
   align-self: center;
 }
 
 .debug-target-item__detail {
   grid-area: detail;
   font-size: var(--caption-20-font-size);
   font-weight: var(--caption-20-font-weight);
 }
+
+.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;
+}
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
@@ -30,22 +30,17 @@ class DebugTargetItem extends PureCompon
         className: "debug-target-item__action",
       },
       actionComponent({ dispatch, target }),
     );
   }
 
   renderDetail() {
     const { detailComponent, target } = this.props;
-    return dom.div(
-      {
-        className: "debug-target-item__detail",
-      },
-      detailComponent({ target }),
-    );
+    return detailComponent({ target });
   }
 
   renderIcon() {
     return dom.img({
       className: "debug-target-item__icon js-debug-target-item-icon",
       src: this.props.target.icon,
     });
   }
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
@@ -27,19 +27,17 @@ class ExtensionDetail extends PureCompon
       getString: PropTypes.func.isRequired,
       target: Types.debugTarget.isRequired,
     };
   }
 
   renderWarnings() {
     const { warnings } = this.props.target.details;
     return dom.section(
-      {
-        key: "extension-warnings",
-      },
+      {},
       warnings.map((warning, index) => {
         return Message(
           {
             level: MESSAGE_LEVEL.WARNING,
             key: `warning-${index}`,
           },
           dom.p(
             {
@@ -126,24 +124,26 @@ class ExtensionDetail extends PureCompon
           label: "Location",
           value: location,
         }
       )
     );
   }
 
   render() {
-    return [
+    return dom.section(
+      {
+        className: "debug-target-item__detail",
+      },
       this.renderWarnings(),
       dom.dl(
         {
-          key: "extension-detail",
           className: "extension-detail",
         },
         this.renderLocation(),
         this.renderExtensionId(),
         this.renderUUID(),
       ),
-    ];
+    );
   }
 }
 
 module.exports = FluentReact.withLocalization(ExtensionDetail);
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/TabDetail.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TabDetail.js
@@ -14,13 +14,14 @@ const Types = require("../../types/index
 class TabDetail extends PureComponent {
   static get propTypes() {
     return {
       target: Types.debugTarget.isRequired,
     };
   }
 
   render() {
-    return dom.div({ className: "ellipsis-text" }, this.props.target.details.url);
+    return dom.div({ className: "debug-target-item__subname ellipsis-text" },
+                   this.props.target.details.url);
   }
 }
 
 module.exports = TabDetail;
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js
@@ -122,17 +122,17 @@ class WorkerDetail extends PureComponent
     );
   }
 
   render() {
     const { fetch, pushServiceEndpoint, scope, status } = this.props.target.details;
 
     return dom.dl(
       {
-        className: "worker-detail",
+        className: "debug-target-item__detail worker-detail",
       },
       pushServiceEndpoint ? this.renderPushService() : null,
       fetch ? this.renderFetch() : null,
       scope ? this.renderScope() : null,
       status ? this.renderStatus() : null,
     );
   }
 }