1 files changed, 42 insertions, 0 deletions
diff --git a/devtools/client/aboutdebugging/src/components/RuntimeInfo.css b/devtools/client/aboutdebugging/src/components/RuntimeInfo.css
new file mode 100644
index 0000000000..e6fcd9dd7e
--- /dev/null
+++ b/devtools/client/aboutdebugging/src/components/RuntimeInfo.css
@@ -0,0 +1,42 @@
+/* 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/. */
+
+
+/**
+ * Layout for the runtime info container is:
+ *
+ *      <- 68px --x--------- 1fr ----------><---- max ---->
+ *   ∧  +---------+------------------------+--------------+
+ *  1fr |         | Runtime Info           |   [Action]   |
+ *   |  |  Icon   | eg "Firefox (70.0a1)"  |              |
+ *   x  |         +------------------------+              |
+ *  max |         | Device Name (optional) |              |
+ *   ∨  +---------+------------------------+--------------+
+ */
+.runtime-info {
+  align-items: center;
+  display: grid;
+
+  grid-column-gap: var(--main-heading-icon-gap);
+  grid-template-areas:
+  "icon title    action"
+  "icon subtitle .";
+  grid-template-columns: var(--main-heading-icon-size) 1fr max-content;
+  grid-template-rows: 1fr max-content;
+
+  margin-block-end: calc(var(--base-unit) * 5);
+}
+
+.runtime-info__icon {
+  grid-area: icon;
+}
+.runtime-info__title {
+  grid-area: title;
+}
+.runtime-info__subtitle {
+  grid-area: subtitle;
+}
+.runtime-info__action {
+  grid-area: action;
+}