Bug 1525619 - Add Disconnect button as disabled in the RuntimeInfo layout r=daisuke,ladybenko

Depends on D20471

I can drop this changeset if we prefer, but this is how I imagine the disconnect button would fit in the RuntimeInfo.

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

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

devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css

@@ -6,13 +6,13 @@
 /**
  * Layout for the runtime info container is:
  *
- *      <- 68px --x--------- 1fr ---------->
- *   ∧  +---------+------------------------+
- *  1fr |         | Runtime Info           |
- *   |  |  Icon   | eg "Firefox (70.0a1)"  |
- *   x  |         +------------------------+
- *  max |         | Device Name (optional) |
- *   ∨  +---------+------------------------+
+ *      <- 68px --x--------- 1fr ----------><---- max ---->
+ *   ∧  +---------+------------------------+--------------+
+ *  1fr |         | Runtime Info           |   [Action]   |
+ *   |  |  Icon   | eg "Firefox (70.0a1)"  |              |
+ *   x  |         +------------------------+              |
+ *  max |         | Device Name (optional) |              |
+ *   ∨  +---------+------------------------+--------------+
  */
 .runtime-info {
   align-items: center;
@@ -20,9 +20,9 @@
 
   grid-column-gap: var(--main-heading-icon-gap);
   grid-template-areas:
-  "icon title"
-  "icon subtitle";
-  grid-template-columns: var(--main-heading-icon-size) 1fr;
+  "icon title    action"
+  "icon subtitle action";
+  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);
@@ -37,3 +37,10 @@
 .runtime-info__subtitle {
   grid-area: subtitle;
 }
+.runtime-info__action {
+  align-self: start;
+  /* The default-button has a font-size of 1em at the moment, this rule should not be
+   * necessary after the first patch from Bug 1525615 lands. */
+  font-size: var(--base-font-size);
+  grid-area: action;
+}

devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js

@@ -56,7 +56,15 @@ class RuntimeInfo extends PureComponent {
             className: "runtime-info__subtitle",
           },
           deviceName
-        ) : null
+        ) : null,
+      dom.button(
+        {
+          className: "default-button runtime-info__action",
+          // Implementation ongoing in Bug 1505128.
+          disabled: true,
+        },
+        "Disconnect"
+      )
     );
   }
 }