1 files changed, 97 insertions, 0 deletions
diff --git a/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css b/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css
new file mode 100644
index 0000000000..f049f33b23
--- /dev/null
+++ b/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css
@@ -0,0 +1,97 @@
+/* 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
+ *
+ *  +--------+-----------------------------+----------------+
+ *  |        | Name                        |                |
+ *  | [Icon] |-----------------------------| Action button  |
+ *  |        | Subname                     |                |
+ *  +--------+-----------------------------+----------------+
+ *  | Detail                                                |
+ *  |                                                       |
+ *  +-------------------------------------------------------+
+ *  | Additional actions                                    |
+ *  |                                                       |
+ *  +-------------------------------------------------------+
+ */
+.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             detail"
+                       "additional_actions additional_actions additional_actions";
+  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%;
+
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.debug-target-item__name {
+  align-self: center;
+  grid-area: name;
+  font-size: var(--body-20-font-size);
+  font-weight: var(--body-20-font-weight-bold);
+  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__additional_actions {
+  grid-area: additional_actions;
+  border-top: 1px solid var(--card-separator-color);
+  margin-block-start: calc(var(--base-unit) * 2);
+  padding-block-start: calc(var(--base-unit) * 2);
+  padding-inline-end: calc(var(--base-unit) * 2);
+}
+
+.debug-target-item__detail {
+  grid-area: detail;
+  margin-block-start: calc(var(--base-unit) * 3);
+}
+
+.debug-target-item__detail--empty {
+  margin-block-start: var(--base-unit);
+}
+
+.debug-target-item__messages {
+  margin-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
+}
+
+.debug-target-item__subname {
+  grid-area: subname;
+  color: var(--secondary-text-color);
+  font-size: var(--caption-20-font-size);
+  font-weight: var(--caption-20-font-weight);
+  line-height: 1.5;
+}
+
+/* The subname is always LTR under the Tabs section,
+   so check its parent's direction to set the correct margin. */
+.debug-target-item:dir(ltr) > .debug-target-item__subname {
+  margin-left: calc(var(--base-unit) * 3);
+}
+
+.debug-target-item:dir(rtl) > .debug-target-item__subname {
+  margin-right: calc(var(--base-unit) * 3);
+}